How to run the content script for the first time?

[adkaushik]

When I install the chrome extension, the content script does not run on the tabs that were
already present. The tabs should be reloaded before the script works. Is there a solution?

[satendra02]

You need to manually inject your content script(.js) and style(.css) in all tabs when the extension will install.

Make use of chrome.runtime.onInstalled in background.js

Copy paste below code in background.js to update your extension in all tabs without reload

chrome.runtime.onInstalled.addListener(function(object) {
       refreshContentScript();
});

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

function refreshContentScript() {
  // 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:// pages
              if(currentTab.url.match(/(file|http|https):\/\//gi)) {
                  injectIntoTab(currentTab);
              }
          }
      }
  });
}

Hope this helps

[adkaushik]

Thanks for the reply. WIll try this 👍

[ShayMe21]

@satendra02 when I copy pasted your code into background.js on a fresh clone, I get this error when loading the extension:
Error handling response: TypeError: Cannot read property 'match' of undefined

[satendra02]

@ShayMe21

Line 47 is checking whether the current tab has any URL in the address bar or not. Modify this line like below and it will work.

if(currentTab.url && currentTab.url.match(/(file|http|https):\/\//gi)) {
    injectIntoTab(currentTab);
}

Or, If you want to load your extension on an empty page as well. Simply remove the if condition.