CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
Justin Maat
Justin Maat

Reputation: 1975

chrome.tabs.executeScript with new browser tab not working?

I'm trying to make a Chrome extension which runs a script whenever the user opens a new tab.

I have the following basic code which is supposed to just paint the page red whenever the extension button is clicked.

It seems to work fine when I navigate to an actual website (ex: here on stackoverflow.com, click my extension icon, page becomes red). However, if I just create a brand new tab and click the button, the popup loads but the page never changes color.

manifest.json:

{
  "manifest_version": 2,
  "name": "ConsoleTap",
  "version": "0.1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "menu.html"
  },
  "permissions": [
    "tabs",
    "<all_urls>",
    "https://ajax.googleapis.com/"
  ]
}

menu.html:

<!doctype html>
<html>
    <head>
        <script src="menu.js"></script>
    </head>
    <body>
        hello
    </body>
</html>

menu.js:

document.addEventListener('DOMContentLoaded', function() {
    chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='red'"});
});

Any ideas on why the page won't update the background color on a new tab? I'm guessing the DOMContentLoaded is never fired or it's listening after the load occurs somehow?

Upvotes: 2

Views: 2917

Answers (1)

woxxom
woxxom

Reputation: 73566

Chrome doesn't allow content scripts on its internal pages: more info

In Chrome 60 and older it was still possible to inject content scripts into the child frames of the default new tab page because it consists of several frames so the restriction only applies to the top level frame. For the default newtab (not some newtab extension) we can match its frame url (https://www.google.com/_/chrome/newtab*) to inject a content script which will activate once a message from the popup is received:

  • manifest.json:

    {
    "name": "executeScript",
    "version": "1.0",
    "content_scripts": [{
        "matches": ["https://www.google.com/_/chrome/newtab*"],
        "js": ["newtabcontent.js"],
        "run_at": "document_start"
    }],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab"
    ],
    "manifest_version": 2
}

  • newtabcontent.js:

    chrome.runtime.onMessage.addListener(function(msg) {
    if (msg == "activate") {
        document.body.style.background = 'red';
        document.body.style.backgroundColor = 'red';
    }
});

  • popup.js:

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    if (tabs[0].url == "chrome://newtab/") {
        chrome.tabs.sendMessage(tabs[0].id, "activate");
    } else {
        chrome.tabs.executeScript({
            code: "document.body.style.backgroundColor='red'",
            allFrames: true
        });
    }
});

Notes:

  1. When this extension is installed and its permissions are displayed the user will see that it can "Read and change your data on www.google.com".
  2. chrome.tabs.executeScript can't be used on newtab page because it instantly fails for the main frame due to unsupported scheme chrome:// and doesn't even proceed to execute on child frames.

Upvotes: 5

Related Questions