I'm trying to inject some JS on a web page using a chrome extension. Since I want to enable it only on click and not every time I visit the page, I have the following manifest:
{
"name": "Assistant",
"version": "0.1",
"manifest_version": 2,
"permissions": [
"https://*/*",
"http://*/*",
"tabs"
],
"background": {
"scripts": [
"js/background.js"
],
"persistent": true
},
"content_scripts": [{
"css": ["css/style.css"],
"matches": ["http://*/*", "https://*/*"]
}],
"browser_action": {
"default_icon": "icons/icon.png",
"default_title": "Assistant"
},
"web_accessible_resources": ["css/style.css"]
}
In background.js, I load the scripts with this:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, { file: "js/jquery.min.js" }, function() {
chrome.tabs.executeScript(null, { file: "js/script.js" });
});
});
Now on script.js I have the following line:
var a = "testing";
window.b = "testing";
alert("testing");
When I click the button, the browser immediately displays an alert for "testing", meaning it ran the code correctly. But, when I go to the console and try to access a or window.b, both are undefined.
Are these variables being sandboxed somehow? How to make it available for page scripts?