Problem in injecting content.js on clicking action toolbar icon

Question

As mentioned in the documentation To inject content script, worked on all the three methods to inject content script but getting an error

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

My manifes.json file

{
  "manifest_version": 3,
  "name": "Job Scraping API",
  "version": "1.0",
  "permissions": [
    "sidePanel",
    "tabs",
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "assets/js/service-worker.js"
  },
  "action": {
    "default_title": "Click to open panel"
  },
  "web_accessible_resources": [
    {
      "resources": [ "login.html", "signup.html" ],
      "matches": [ "*://*/*" ]
    }
  ],
  "side_panel": {
    "default_path": "side-panel.html"
  },
  "icons": {
   "96" : "assets/brand_96.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["assets/js/content.js"]
    }
  ]
}

and my service-worker.js file code

const GOOGLE_ORIGIN = 'https://';

// Allows users to open the side panel by clicking on the action toolbar icon
chrome.sidePanel
.setPanelBehavior({ openPanelOnActionClick: true })
.catch((error) => console.error(error));

chrome.tabs.query({ active: true, currentWindow: true }, async function (tabs) {
    await chrome.tabs.sendMessage(tabs[0].id, { action: "scrapeJobData" }, function (response){
       displayOutput(response.data);
    });
});


chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
    if (!tab.url) return;
    const url = new URL(tab.url);
    // Enables the side panel on all sites that start with https://
    if (url.origin.startsWith(GOOGLE_ORIGIN)) {
        await chrome.sidePanel.setOptions({
        tabId,
        path: 'side-panel.html',
        enabled: true
        });
    } else {
        // Disables the side panel on all other sites
        await chrome.sidePanel.setOptions({
        tabId,
        enabled: false
        });
    }
});

Installed extension with load unpacked and pinned the extension and upon action toolbar icon i was expecting the content.js file to get executed but got error on all the three documented inject method.

Error Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

When i refresed the page and then again opend my extension the content script gets injected, everytime i have to refresh the page before opening my extension to inject content scrpit

Problem in injecting content.js on clicking action toolbar icon

0 Answers0