Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enable content script in chrome extension programmatically

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.

like image 285
void Avatar asked Sep 28 '17 19:09

void


People also ask

How do I add content script to Chrome extension?

To inject a content script programmatically, your extension needs host permissions for the page it's trying to inject scripts into. Host permissions can either be granted by requesting them as part of your extension's manifest (see host_permissions ) or temporarily via activeTab.

How do you get a content script to load after a page's JavaScript has executed?

Add a script tag as the last element of the page (last thing in the body element). This script will be executed after all other scripts have finished and after the body has been converted to a DOM tree.

How do I run a script in Chrome?

Open Chrome, press Ctrl+Shift+j and it opens the JavaScript console where you can write and test your code.

What is a content script Chrome?

A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the website itself, such as those loaded using the <script> element).


2 Answers

This needs two parts:

Programmatic script injection

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

browser.contentScripts.register({
    matches: ['https://your-dynamic-domain.example.com/*'],
    js: [{file: 'content.js'}]
});

This API is only available in Firefox but there's a Chrome polyfill you can use. In the future there will also be chrome.scripting.registerContentScript but it's not yet implemented.

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.

like image 133
fregante Avatar answered Sep 25 '22 15:09

fregante


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.

like image 32
v3nom Avatar answered Sep 24 '22 15:09

v3nom