Getting error with service_worker script in chrome extension

Question

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 -

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;
    }
  });

@grimsteel tried reloading multi times, still getting the same error. — Namit Gupta, Mar 24 '23 at 04:59
@NorioYamamoto its giving error whether I reload existing tab or create a new tab. — Namit Gupta, Mar 24 '23 at 05:26
Please check the documentation because the first argument of `chrome.tabs.onActivated.addListener` is wrong. — Norio Yamamoto, Mar 24 '23 at 05:38
@NorioYamamoto I update the background.js code to - `chrome.tabs.onUpdated.addListener((tabId, tab) => { //Sends a message to the active tab chrome.tabs.sendMessage(tabId, { type: "NEW", }); });` now getting - "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist." — Namit Gupta, Mar 24 '23 at 05:55
Even if the code is written in comments, it is difficult to read. Please edit the code in your question. — Norio Yamamoto, Mar 24 '23 at 06:41

score 0 · Answer 1 · answered Mar 24 '23 at 06:13

0

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",
    });
  })
});

answered Mar 24 '23 at 06:13

Norio Yamamoto

1,495
2
3
10

Thanks @Norio, I have updated the code, now getting - `Error in event handler: TypeError: Error in invocation of tabs.get(integer tabId, function callback): No matching signature. at chrome-extension://jbaiknknjmegongfgcgcgnmhdibcphcj/background.js:2:15` I am trying to debug, let me know if you have any idea about this. – Namit Gupta Mar 24 '23 at 06:29

score 0 · Answer 2 · answered Mar 24 '23 at 11:21

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.
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.

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);
});

Getting error with service_worker script in chrome extension

2 Answers2