Chrome extension content script re-injection after upgrade or install

by

There’s a way to allow a content script heavy extension to continue functioning after an upgrade, and to make it work immediately upon installation.

Install/upgrade

The install method is to simply iterate through all tabs in all windows, and inject some scripts programmatically into tabs with matching URLs.

Obviously, you have to do it in a background page or event page script declared in manifest.json:

"background": {
    "scripts": ["background.js"]
},

background.js:

// Add a `manifest` property to the `chrome` object.
chrome.manifest = chrome.runtime.getManifest();

var injectIntoTab = function (tab) {
    // You could iterate through the content scripts here
    var scripts = chrome.manifest.content_scripts[0].js;
    var i = 0, s = scripts.length;
    for( ; i < s; i++ ) {
        chrome.tabs.executeScript(tab.id, {
            file: scripts[i]
        });
    }
}

// Get all windows
chrome.windows.getAll({
    populate: true
}, function (windows) {
    var i = 0, w = windows.length, currentWindow;
    for( ; i < w; i++ ) {
        currentWindow = windows[i];
        var j = 0, t = currentWindow.tabs.length, currentTab;
        for( ; j < t; j++ ) {
            currentTab = currentWindow.tabs[j];
            // Skip chrome:// and https:// pages
            if( ! currentTab.url.match(/(chrome|https):\/\//gi) ) {
                injectIntoTab(currentTab);
            }
        }
    }
});

ManifestV3

manifest.json:

"background": {"service_worker": "background.js"},
"permissions": ["scripting"],
"host_permissions": ["<all_urls"],

These host_permissions should be the same as the content script’s matches.

background.js:

chrome.runtime.onInstalled.addListener(async () => {
  for (const cs of chrome.runtime.getManifest().content_scripts) {
    for (const tab of await chrome.tabs.query({url: cs.matches})) {
      chrome.scripting.executeScript({
        target: {tabId: tab.id},
        files: cs.js,
      });
    }
  }
});

This is a simplified example that doesn’t handle frames. You can use getAllFrames API and match the URLs yourself, see the documentation for matching patterns.

Historical trivia

In ancient Chrome 26 and earlier content scripts could restore connection to the background script. It was fixed http://crbug.com/168263 in 2013. You can see an example of this trick in the earlier revisions of this answer.

More Related Contents:

  1. Chrome extension is not loading on browser navigation at YouTube
  2. Chrome extension: accessing localStorage in content script
  3. Optionally inject Content Script
  4. Access window variable from Content Script [duplicate]
  5. Use a content script to access the page context variables and functions
  6. Access global js variables from js injected by a chrome extension
  7. Custom protocol handler in chrome
  8. chrome extension mv3 – Modularize service worker js file
  9. Modify HTTP responses from a Chrome extension
  10. Chrome extension adding external javascript to current page’s html
  11. Service worker registration failed. Chrome extension
  12. Permission ” is unknown or URL pattern is malformed
  13. How is the Chrome Extension ID of an unpacked extension generated?
  14. How to inject javascript into Chrome DevTools itself
  15. chrome extension: how to send ‘keydown’ event to page’s input?
  16. Access variables and functions defined in page context using a content script
  17. How to migrate manifest version 2 to v3 for chrome extension?
  18. How to trigger click on a button
  19. CORS Chrome Extension with manifest version 2
  20. Persistent background page on demand or an event page that doesn’t unload?
  21. On page load event in Chrome extensions
  22. How do I log out of a chrome.identity oauth provider
  23. cannot create item with duplicate context menu id in extension
  24. How to get a content script to load AFTER a page’s Javascript has executed?
  25. Can I hide my extension’s icon by default?
  26. chrome.tabs.executeScript not working?
  27. Google Chrome Socket API in extensions
  28. How to send message FROM native app TO Chrome extension?
  29. Chrome extension page action appearing outside of address bar
  30. How to debug chrome devtools panel extension?

Leave a Comment