Unchecked runtime.lastError: Cannot access contents of url. But I dont need to access content of that URL

Question

I am making a Chrome Extension. Below, I have pasted the manifest file for that.

Manifest File

{
    "manifest_version": 2,
    "name": "abc",
    "version": "0.1",
    "author": "def",
    "description": "",
    "permissions": [
        "tabs",
        "storage",
        "webNavigation",
        "*://www.youtube.com/*"
    ],
    "content_scripts": [{
        "matches": [
            "*://www.youtube.com/*"
        ],
        "js": [
            "content.js"
        ],
        "css": ["style.css"],
        "run_at": "document_end"
    }],
    "background": {
        "page": "background.html"
    },
    "browser_action": {
        "default_popup": "index.html",
        "default_title": "A tooltip popup description when you hover over the Chrome Extension icon."
    },
    "content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"
}

This extension is for youtube and thus I have requested permissions for that site only. I don't need access to other sites.

Sometimes I get the following errors:

Unchecked runtime.lastError: Cannot access contents of url "https://www.skysports.com/football/news/11095/12055673/kalidou-koulibaly-gabriel-magalhaes-ben-white-who-are-the-most-in-demand-centre-backs-this-transfer-window". Extension manifest must request permission to access this host.

Unchecked runtime.lastError: Cannot access contents of URL "https://material.io/resources/icons/?icon=linear_scale&style=outline". Extension manifest must request permission to access this host.

Background.js

// regex for youtube watch page
const regWatch = /^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/watch\?+/gm;

var firebaseConfig = {
   // firebase project details 
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const database = firebase.firestore();


chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    console.log(details);
    // match if its youtube watch page
    if ((details.url).match(regWatch)) {
        chrome.tabs.executeScript(null, { file: "content.js" });

       
    } else {
        // any other website except youtube or
        // any other youtube page except the one with the watch in the URL
        console.log("NO need to run the script");
    }

});

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log(sender.tab ?
            "from a content script:" + sender.tab.url :
            "from the extension");
        if (request.data) {
           // call to firestore 
        }
        return true;
    }
);

Why am I getting those errors in the background script? If you need any other info feel free to ask. Thanks

Answer 1

The problem is that executeScript without a tab id (null in your code) runs in the active tab (aka "currently focused" tab) but navigation can also occur in inactive tabs.

You need to use details.tabId in executeScript to run it in the tab where navigation occurred:

chrome.tabs.executeScript(details.tabId, { file: "content.js" });

Further optimizations:

• It might be more efficient to use simple messaging instead of re-injecting.

• The webNavigation event is triggered in iframes too so check details.frameId to skip them.

• Use URL filters to limit webNavigation events:

  chrome.webNavigation.onHistoryStateUpdated.addListener(details => {
    if (!details.frameId) {
      chrome.tabs.executeScript(details.tabId, {file: 'content.js'});
    }
  }, {
    url: [
      {hostEquals: 'youtu.be'},
      {hostEquals: 'www.youtube.com', pathPrefix: '/watch'},
    ],
  });