Question

When a user clicks on the browser icon for the extension, it brings up the Popup that has been defined.

I need to create a toggle button to turn on/off a stylesheet for a specific page/domain when a user clicks a button that is within the popup.

For example, when a user uses the Adblock extension, when the user clicks the browser icon, it brings up the popup, which has a series of links. One such link is “don’t run on this page”, which then changes to “enable” which the user can click to turn it back on.

Another example (much better example): Classic Popup blocker has a button on the popup that says “add this page to blacklist” and once clicked changes to “remove from blacklist”.

The classic popup blocker is generally the functionality I want for my extension (it’s not doing anything with ads or popup blocking, that was just an example), so that when a user clicks the button on the popup it will turn a stylesheet on or off that I have written and saved as a .css file in the extension.

I hope I have made this clear enough to understand.

---

SCREENS

Here is a photoshopped picture that I made so that you can see exactly what I am trying to do:

---

and photoshopped again to see what should happen once you click the buttons:

---

Answer 1

You can use the chrome.tabs.executeScript method to dynamically inject/remove CSS (requires the tabs permission in manifest.json):

chrome.tabs.executeScript(null, {code:
    'document.documentElement.setAttribute("RWchooseStyle", "style1.css");'
}, function() {
    chrome.tabs.executeScript(null, {file: 'myscript.js'});
});

In myscript.js, detect whether you have already inserted CSS. If not, add a new <style> or link element, and assign an id to it. Otherwise, replace the style sheet.

Example of myscript.js:

var selectedStyle = document.documentElement.getAttribute('RWchooseStyle');
var id, link;
if (selectedStyle) {
    id = 'RW_style_' + selectedStyle.replace(/\W/g,'');   // Sanitize id
    // Remove previous sheet, if available.
    link = document.getElementById(id);
    if (link) {
        link.parentNode.removeChild(link);
    }
}
if (id) {
    // Insert new sheet
    link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = chrome.extension.getURL(selectedStyle);
    link.id = id;
    (document.head||document.documentElement).appendChild(link);
}

// Remove temporary attribute
document.documentElement.removeAttribute('RWChooseStyle');

In this example, the CSS files have to be defined in your extensions directory. Of course, you can also use <style> instead if <link>, and dynamically set the style’s content.

Note: Do not forget to add the style sheet to the web_accessible_resources section of the manifest file.