11

I have developed a chrome extension and it is working absolutely fine.

Part of the manifest.json looks like this:

"content_scripts":[
        {
            "js":["js/script.js"],
            "css": ["css/style.css"],
            "matches": ["http://localhost/*", "https://localhost/*"]
        }
    ],

so the extension injects the content script only when the domain is localhost, which is also working fine. Now I want a way by which the extension popup can have a enable extension on this domain or disable extension on this domain in the so the user can enable/disable the extension according to needs.

I have seen that in multiple ad-blocker plugins, so I guess it should be possible.

Cœur
  • 37,241
  • 25
  • 195
  • 267
void
  • 36,090
  • 8
  • 62
  • 107
  • Either switch to declarativeContent API with RequestContentScript or simply store the state in chrome.storage and read it in the content script. – wOxxOm Sep 28 '17 at 19:44
  • @wOxxOm when you are saying store the state in chrome.storage then which state are you referring to? And how exactly will that enable content script on a certain domain? – void Sep 29 '17 at 04:30
  • With the state approach, the content script runs on all sites. – wOxxOm Sep 30 '17 at 11:10
  • I'd try declarativeContent or manual programmatic injection via tabs.executeScript. – wOxxOm Sep 30 '17 at 11:11
  • I highly suggest **not** using `declarativeContent.RequestContentScript`: it's broken and unsupported. CSS isn't injected and JS can be injected multiple times on the same page. – fregante Aug 03 '19 at 07:51

2 Answers2

3

This needs two parts:

Programmatic script injection

Now there's the chrome.scripting.registerContentScripts() API, which lets you programmatically register content scripts.

chrome.scripting.registerContentScripts([{
    id: "a-script",
    matches: ['https://your-dynamic-domain.example.com/*'],
    js: ['content.js']
}]);

Acquiring new permissions

By using chrome.permissions.request you can add new domains on which you can inject content scripts. An example would be:

// In a content script, options page or popup
document.querySelector('button').addEventListener('click', () => {
    chrome.permissions.request({
        origins: ['https://your-dynamic-domain.example.com/*']
    }, granted => {
        if (granted) {
            /* Use contentScripts.register */
        }
    });
});

For this to work, you'll have to allow new origins to be added on demand by adding this in your manifest.json

{
    "optional_permissions": [
        "http://*/*",
        "https://*/*"
    ]
}

There are also tools to further simplify this for you and for the end user, such as webext-domain-permission-toggle and webext-dynamic-content-scripts, which are used by many GitHub-related extensions to add support for self-hosted GitHub installations.

They will also register your scripts in the next browser launches and allow the user the remove the new permissions and scripts as well.

fregante
  • 29,050
  • 14
  • 119
  • 159
2

Google is working on programmatic script registration for extension manifest v3. The new API will be called chrome.scripting.registerContentScript and pretty much matches what Firefox already has, minus the intuitive naming of the API. You can follow the implementation status in this Chrome bug.

v3nom
  • 395
  • 2
  • 5