Request Permissions when on valid URL for Chrome Extension - google-chrome-extension

I have an array of valid URLs for a user.
let validUrls = ["*.example.com", "*.foo.com"]
I want to request permission to run my contentScript.js if the activeTab is on a domain that is a validUrl.
Without the user accepting permission first, I don't seem to get the active tab URL, so I am in a catch 22.
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
console.log("Tab Changed: ", changeInfo, tab);
chrome.scripting.executeScript(
{
target: { tabId: tabId },
func: checkPermissions,
args: [tab.url], // Null because no permission is granted yet
},
(result) => {
console.log(result);
}
);
});
I would like only to be requesting the activeTab permission and not the tabs permission.

Related

Google oauth prevents pop-up the first time resulting in "Content Security Policy directive script-src contains an invalid source: strict-dynamic"

I have the google API installed in a script tag
<script src="https://apis.google.com/js/platform.js"></script>
and I have a button for google sign in that calls this function
export const googleOauth = (params) => {
return new Promise((resolve, reject) => {
window.gapi.load("auth2", () => {
window.gapi.auth2.authorize(
{
client_id: process.env.GOOGLE_CLIENT_ID,
scope: "email profile",
response_type: "code",
},
(response) => {
if (response && !response.error) {
const data = { data: { ...response, ...params } }
post(oauthUrl, data)
.then((res) => resolve(res))
.catch((error) => reject(error))
} else {
reject(response.error)
}
}
)
})
})
}
It's working fine on desktop browsers but for mobile browsers it will result in the google pop-up from appearing the first time it gets clicked. The console shows this error:
The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
The second time however you if you click the button it will open the pop-up in a separate window as expected on mobile. It's just the initial click that causes this error. Any ideas on how to fix this?

Access tabs of the same website from Chrome extension without using the "tabs" permission

I'm writing a window manager extension for Google Chrome, the extension is supposed to work only on a specific website.
I need to list all the open tabs of the given website, and to do so I do:
chrome.windows.getAll(windows => {
windows.forEach(window => {
chrome.tabs.query({ windowId: window.id }, tabs => {
const websiteTabs = tabs.filter(tab => tab.url.startsWith(MY_WEBSITE));
console.log(websiteTabs);
});
});
});
The problem I'm having is that to make the above code work I need to access tab.url, which requires the tabs permission, that in turn shows to the users that install my extension a warning that says my extension can access their browser history.
How can I get the above code work without needing the tabs permission so that my users are not concerned about their privacy?
I figured out a way, I'm not sure if there's a better system but this one works.
Basically I send a message to each tab, and I tell my website tabs to respond with their URL, this way I only receive responses from my own website tabs.
// background.js
chrome.windows.getAll(windows => {
windows.forEach(window => {
chrome.tabs.query({ windowId: window.id }, tabs => {
tabs.forEach(tab => {
chrome.tabs.sendMessage(
tab.id,
{ message: 'whois', id: tab.id },
url => {
console.log('This is the tab URL!', url);
}
);
});
const websiteTabs = tabs.filter(tab => tab.url.startsWith(MY_WEBSITE));
});
});
});
// inject.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if(request.message === 'whois') {
sendResponse(window.location.href);
}
});

What does origins mean in "chrome.permissions.request"?

I am working on a Google Chrome extension.
The optional permission is what I need.
According to the documentation here The user can request permission on demand. And the code is like this:
document.querySelector('#my-button').addEventListener('click', function(event) {
// Permissions must be requested from inside a user gesture, like a button's
// click handler.
chrome.permissions.request({
permissions: ['tabs'],
origins: ['http://www.google.com/']
}, function(granted) {
// The callback argument will be true if the user granted the permissions.
if (granted) {
doSomething();
} else {
doSomethingElse();
}
});
});
What does the origins: ['http://www.google.com/'] mean in the object that are passing to chrome.permissions.request?

Google webRequests API- escape onBeforeWebRequest redirection on condition

I am working on a small chrome extension and trying to redirect a user on certain URLs (using onBeforeWebRequest) to my html page for them to enter a password (saved on storage) and if password is OK I want to redirect them to their original URL.
I am saving the user's original URL in storage.local and pull it after they enter the correct password.
My problem is that when I try to redirect from my page to the user's original URL, the onBeforeWebRequest listener kicks in and redirects again (to the password page).
I thought about redirecting if a certain flag is on, but I think it won't work if the user opens a few tabs and tries to go to the listed URLs.
Code:
background.js:
chrome.webRequest.onBeforeRequest.addListener(details => {
var firstLogin;
chrome.storage.local.set({'redirect-to': details.url});
chrome.storage.sync.get('firstLogin', (value) => {
firstLogin = value['firstLogin'];
});
if (firstLogin == false) {
return {
redirectUrl: chrome.runtime.getURL('html/redirect.html')
}
}
else {
return {
redirectUrl: chrome.runtime.getURL('html/options.html')
}
}
}, {
urls: ["http://www.gmail.com/*"]
}, ['blocking']
);
redirect.js:
redirectBtn.addEventListener('click', () => {
chrome.storage.local.get('redirect-to', (value) => {
location.href = value['redirect-to'];
});
});

Chrome.identity.getAuthToken not showing Google user list

content.js This is the content page for chrome extension
document.getElementById("signIn").addEventListener("click", function(){
chrome.runtime.sendMessage({task:"switchUser", user: current_user},function(response){
});
});
background.js This is the background page for chrome extension
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse){
if(request.task == "switchUser"){
function getToken(){
chrome.identity.getAuthToken({ interactive: true }, function(token) {
sendResponse(token);
});
}
chrome.identity.removeCachedAuthToken({ token:
currentSessionAccessToken }, getToken);
}
return true;
});
Previous OAuth token is successfully removed but when generating a new one using getAuthToken, the user selection list is not shown. However, I have set interactive to true. What am I missing?
You need to revoke the token first and then remove from cache. Please find the code below for background.js page.
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse){
if(request.task == "switchUser"){
function getToken(){
chrome.identity.getAuthToken({ interactive: true }, function(token) {
sendResponse(token);
});
}
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', 'https://accounts.google.com/o/oauth2/revoke?token=' + currentSessionAccessToken); //revoke the token calling this url.
xmlHttp.onload = function() {
chrome.identity.removeCachedAuthToken({ token: currentSessionAccessToken }, getToken); //after token is revoked, remove it from cache as well.
}
xmlHttp.onerror = function(){
};
xmlHttp.send();
}
return true;
});

Resources