chrome extension: run script after page has finished loading javascript

Question

this is not firing at all when the page finishes loading. Basically when I click the browser action button, it will trigger it on, and on page load, it will run a script. In my background.js ``` var toggle = false; chrome.browserAction.onClicked.addListener(function(tab) { toggle = !toggle; if(toggle){ chrome.browserAction.setIcon({path: "icons/logo.png", tabId:tab.id}); // chrome.tabs.executeScript(tab.id, {file:"SCRIPT.user.js"}); chrome.tabs.executeScript(tab.id, {code:"alert('aaxxxbbaa')"}); } else{ chrome.browserAction.setIcon({path: "icons/icon48.png", tabId:tab.id}); chrome.tabs.executeScript(tab.id, {code:"alert('bbdxdb')"}); } }); var filter = {'url': [ {hostSuffix: '*', pathPrefix: ''}, {hostSuffix: '*', pathPrefix: ''} ]}; chrome.webNavigation.onDOMContentLoaded.addListener(function(tab){ if (toggle) chrome.tabs.executeScript(tab.id,{code:"alert('loaded')"}); },filter); ``` I've also tried to set it in the manifest ``` { "name": "Tool", "version": "0.0.1", "manifest_version…

Accepted Answer

In your manifest file, you have duplicate content scripts, one with CSS and one with JS. It should look like this:

```
  "content_scripts": [
    {
      "run_at": "document_end",
      "matches": [
        "https://www.google.ca/*"
      ],
      "js": [
        "src/inject/inject.js"
      ],
      "css": [
        "src/inject/inject.css"
      ]
    }
   ]
```

Also, if you want it to match other urls, you will need to add them specifically, or use

```
"matches": ["<all_urls>"]
```

As for your proposed background script, that is essentially re-inventing the concept of content scripts, and it may not be in your best interest. I suggest sticking with the content script route.

chrome extension: run script after page has finished loading javascript

Solution

Problem