Chrome Extension: Make It Run Every Page Load

Chrome Extension: Make it run every page load

From a background script you can listen to the chrome.tabs.onUpdated event and check the property changeInfo.status on the callback. It can be loading or complete. If it is complete, do the action.

Example:

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete') {

    // do your things

  }
})

Because this will probably trigger on every tab completion, you can also check if the tab is active on its homonymous attribute, like this:

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete' && tab.active) {

    // do your things

  }
})

On page load event in Chrome extensions

Register a content script in the manifest file at "run_at": "document_idle" (which is the default) and put your code in the content script file. Then the script will be run when the page is ready.

If you want to detect from the background page whether a page is completely loaded, use the chrome.webNavigation.onCompleted event and do whatever you want, such as calling chrome.tabs.executeScript to execute a content script. This method could be useful over the previous method if the list of URLs is dynamic or if the URL patterns cannot be described using the match pattern syntax.

chrome.webNavigation.onCompleted.addListener(function(details) {
    chrome.tabs.executeScript(details.tabId, {
        code: ' if (document.body.innerText.indexOf("Cat") !=-1) {' +
              '     alert("Cat not found!");' +
              ' }'
    });
}, {
    url: [{
        // Runs on example.com, example.net, but also example.foo.com
        hostContains: '.example.'
    }],
});

The webNavigation and host permissions have to be set in manifest.json, e.g.:

{
  "name": "Test",
  "version": "1.0",
  "background": { "scripts": ["background.js"] },
  "permissions": [ "webNavigation", "*://*/*" ],
  "manifest_version": 2
}

run js script in chrome extension on page load

So I think that the simple solution is just to create a content script and there to wait until the page is load :

manifest.json

{
    "manifest_version": 2,
    "name": "Getting started example",
    "description": "This extension shows a Google Image search result for the   current page",
    "version": "1.0",
    "content_scripts": [
        {
            //Set your address you want the extension will work in mataches!!!
            "matches": ["http://mail.google.com/*", "https://mail.google.com/*"],
            "js": ["content.js"],
            "run_at": "document_end"
        }
    ],
    "permissions": ["activeTab", "https://ajax.googleapis.com/"],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }
}

content.js

window.onload=function(){
     console.log("page load!");
}

You could also use with message passing between background.js and your content page and to check that tab is loaded but for your case I think it's enough.

run chrome extension on page load

You can do that by editing your background.js replacing alert() with chrome.tabs.executeScript(null, {file: "/js/overlay_remover.js"}); and include the overlay remover in your files:

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status === 'complete' && tab.active) {
    setTimeout(() => {
      chrome.tabs.executeScript(null, {file: "overlay_remover.js"});
    }, 3000); // 3000 = delay in milliseconds (3 seconds)
  }
})

Note that you should keep your manifest the same and keep your background.js

---

Related Topics