skip to Main Content

I am building a chrome extension where I need to send a message from background.js to content.js on tab change, but its failing everytime.

I am seeing the following error on the chrome’s extension tab –

enter image description here

Here is how my manifest file looks –

{
  "manifest_version": 3,
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": [
    "tabs"
  ],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

Background.js

chrome.tabs.onActivated.addListener((tabId, tab) => {
  //Sends a message to the active tab
  chrome.tabs.sendMessage(tabId, {
    type: "NEW",
  });
});

Content.js

chrome.runtime.onMessage.addListener((obj, sender, response) => {
    const { type, value } = obj;

    if (type === "initObserver") {
      initObserver;
    }
  });

2

Answers


  1. Do not send messages to New Tab or tabs starting with chrome:// because content scripts cannot be injected.

    background.js

    chrome.tabs.onActivated.addListener((activeInfo) => {
      chrome.tabs.get(activeInfo.tabId, (tab) => {
        if (tab.url == "") return;
        if (tab.url.startsWith("chrome://")) return;
        //Sends a message to the active tab
        chrome.tabs.sendMessage(activeInfo.tabId, {
          type: "NEW",
        });
      })
    });
    
    Login or Signup to reply.
    1. The invocation error means one of the parameters of sendMessage is incorrect but it can’t happen with the code currently posted in the question, so apparently it’s an old error. Click the trashcan icon to remove it.

    2. After the extension is reloaded or installed/updated you’ll need to inject the content scripts explicitly into currently open tabs because Chrome doesn’t do it automatically, example.

    3. There will be tabs that can’t run content script such as other extensions or chrome:// pages as well web sites forbidden for your extension via a global runtime_blocked_hosts policy. You can suppress and ignore the connection error so it doesn’t pollute the logs:

      const PORT_RE = /Receiving end does not exist|The message port closed before/;
      const ignorePortError = e => !PORT_RE.test(e.message) && Promise.reject(e);
      
      chrome.tabs.onActivated.addListener((tabId, tab) => {
        chrome.tabs.sendMessage(tabId, {
          type: "NEW",
        }).catch(ignorePortError);
      });
      
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search