0

I want to send a message from a content script injected in a web page to the background of the Chrome extension, but getting the famous chrome.runtime.lastError with error message 'Could not establish connection. Receiving end does not exist.'

I have the next manifest.json

{
    "manifest_version": 2,
    "name": "Sample Name",
    "version": "1.0.0",
    "description": "Sample description",
    "short_name": "Short Sample Name",
    "permissions": ["tabs", "https://google.com/*", "activeTab", "declarativeContent", "storage"],
    "externally_connectable": {
        "ids": ["{my_extension_id}"],
        "matches": ["https://www.google.com/*"]
    },
    "content_scripts": [
        {
            "ids": ["{my_extension_id}"],
            "matches": ["https://www.google.com/*"],
            "js": [
                    "content.js"
                ],
            "css": ["test.css"]
        }
    ],
    "browser_action": {
        "default_title": "Sample title",
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "32": "icons/icon32.png"
        }
    }
}

the next content.js

const extensionId = "{my_extension_id}";
const url = window.location.href;
function ping() {
    chrome.runtime.sendMessage(extensionId, "ping", (response) => {
        if (chrome.runtime.lastError) {
            console.log("chrome.runtime.lastError again...");
            setTimeout(ping, 1000);
        } else {
        chrome.runtime.sendMessage(
            extensionId,
            { url: url },
            function (response) {
                console.log(response);
            }
        );
        }
    });
}

ping();

and the next background.js

chrome.app.runtime.onLaunched.addListener(function () {
    chrome.app.window.create("window.html", {
        outerBounds: {
            width: 500,
            height: 500,
        },
    });
});

chrome.runtime.onConnect.addListener((port) => {
    console.log("connected ", port);
    port.onMessageExternal.addListener(function (request, sender, sendResponse) {
        if (blocklistedWebsite.includes(sender.url)) return; 
        sendResponse({
            success: true,
            msg: "I have received your message",
        });
    });
});
const blocklistedWebsite = [];
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
    sendResponse({
        success: true,
        msg: "I have received your message",
    }); 
});

I tried to do it correct, but now I'm getting a message about chrome.runtime.lastError every second in the web page console. I use the latest version of Chrome.

Boris
  • 351
  • 1
  • 3
  • 11
  • _"I want to send a message from a web page to the Chrome extension..."_ do you mean from [content to background](https://developer.chrome.com/docs/extensions/mv3/messaging/#simple) within the same extension, from [external website to extension](https://developer.chrome.com/docs/extensions/mv3/messaging/#external-webpage) or from [one extension to another](https://developer.chrome.com/docs/extensions/mv3/messaging/#external)? The intent is not clear from the examples included. Also, did you mean to establish a long-lived connection? – Neea Oct 16 '21 at 08:45
  • I want to send a message from a content script injected into a certain web page to the background within the same extension. I think, it would be good for my goal to establish a long-lived connection, but I decided to begin from a single message, thinking that it would be more simple. – Boris Oct 16 '21 at 09:01
  • I have edited my question now, adding the details about my intent. – Boris Oct 16 '21 at 09:08
  • 1
    Your content script is not an external thing so you need to remove all `"ids": ["{my_extension_id}"]`, `extensionId `, and `externally_connectable`, rename `onMessageExternal` to `onMessage`, remove the entire `chrome.app.runtime` block because your extension is not a chrome app, finally reload the extension as well as the tabs. See also [How to see background.js console?](/a/10258029) – wOxxOm Oct 16 '21 at 10:24
  • @wOxxOm, thx for your answer, which was good for my understanding, and especially for the last link. I made as you pointed, deleted all useless code, but found that my problem didn't disappear. And then I added a missing section to my `manifest.json`: `"background": {"scripts": ["background.js"] }` That solved my problem at last. – Boris Oct 16 '21 at 12:42

0 Answers0