Even after reading numerous answers on similar questions, I am still facing some difficulties. My goal is to allow the user to disable my chrome extension by simply clicking on the icon at any time. The extension is designed to run once on every page load, so when the icon is clicked, it should prevent the code from running on the next page load. When the icon is clicked, it should visually change color to indicate whether it's active or inactive. This aspect of the code is functioning as intended, but there seems to be an issue with updating a localStorage variable to reflect the status of the extension. Despite setting the storage variable to "off" when the icon is clicked, the content script continues to execute on each page load. Upon checking the console, the localStorage variable consistently displays "on." What could be causing this behavior?
P.S. I have also verified that the content script is not always resetting the storage variable to "on," in case it was being reset upon reloading the page.
Manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"version": "0.1",
"icons":
{
"128": "128.png",
"48": "48.png",
"16": "16.png"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["jquery-3.1.1.min.js", "content.js"]
}
],
"browser_action": {
"default_icon": "16.png"
},
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": ["tabs", "storage"],
"web_accessible_resources": [
"spritesheet.png"
]
}
Background Page
chrome.browserAction.onClicked.addListener(function(tab) {
//if on, turn off
if (localStorage.onoff == "on") {
chrome.browserAction.setIcon({path:{"16": "16grey.png", "48": "48grey.png","128": "128grey.png"}});
localStorage.onoff = "off";
//if off, turn on
} else {
chrome.browserAction.setIcon({path:{"16": "16.png", "48": "48.png","128": "128.png"}});
localStorage.onoff = "on";
}
});
Content script
if (!localStorage.onoff) {
localStorage.onoff = "on";
}
if (localStorage.onoff == "on") {
//execute the extension
}