the message sent from a webpage to a Chrome extension using chrome.runtime.sendMessage does not receive

Question

the message sent from a webpage to a Chrome extension using chrome.runtime.sendMessage does not receive

My Chrome extension, mv3, has the capability to receive messages from webpages and respond accordingly. Below are the code snippets that enable the webpage to send a message to the extension:

chrome.runtime.sendMessage(chromeExtensionId,
            {
             "Message": "Hello",
             "Data":
             {
              "Name": 'Jason'
             }
            },
            function(response) {
             console.log("chrome.runtime.sendMessage", response);
           });

and here are the codes within the extension's background.js file to handle incoming messages and reply with true/false:

chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
    console.log(message, sender));
    sendResponse(true);
  });

The manifest.json file contains essential configurations for the extension:

{
   "background": {
      "service_worker": "background.js"
    },
   "action": {
      "default_icon": {
         "16": "images/logo16.png",
         "32": "images/logo32.png"
      },
      "default_title": "My Extension"
   },
   "content_scripts": [ {
      "all_frames": true,
      "match_about_blank": true,
      "js": [ "util.js", "contentscript.js" ],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_end"
   } ],
   "description": " ",
   "externally_connectable": {
      "matches": [ "https://*.mysite.com/*", "http://*.mysite.com/*" ]
   },
   "icons": {
      "128": "/images/logo128.png",
      "16": "/images/logo16.png",
      "32": "/images/logo32.png",
      "48": "/images/logo48.png"
   },
   "manifest_version": 3,
   "name": "My Extension",
   "permissions": ["cookies", "tabs", "proxy", "alarms", "storage", "downloads", "webRequest", "notifications", "nativeMessaging", "clipboardRead", "clipboardWrite", "declarativeNetRequest","declarativeNetRequestFeedback" ],
   "host_permissions": ["<all_urls>"],
   "version": "4.0.7"
}

In most cases, the extension functions properly.

However, there is an issue when setting my webpage as the startup page for Chrome, causing the sendMessage method to not return, and no output is displayed in the console logs of both the sender and receiver sides. There are no error messages being generated either. It appears that the execution freezes within the sendMessage function. What could be causing this behavior?

javascript chrome-extension-manifest-v3

Answer 1

Answer №1

This issue has been identified as a common problem in Chrome. The browser intentionally delays extensions during startup to prioritize displaying the active tab quickly. One possible solution is to use the sendMessage function repeatedly:

send('abcdefgkhgghfg........', {foo: 'bar'}, res => {
  console.log('response', res);
});

function send(extensionId, msg, callback, retry = 20) {
  const timer = setTimeout(send, 100, extensionId, msg, callback, retry - 1);
  chrome.runtime.sendMessage(extensionId, msg, response => {
    if (!chrome.runtime.lastError || !retry) {
      clearTimeout(timer);
      callback(response);
    }
  });
}

Answer 2

This issue has been identified as a common problem in Chrome. The browser intentionally delays extensions during startup to prioritize displaying the active tab quickly. One possible solution is to use the sendMessage function repeatedly:

send('abcdefgkhgghfg........', {foo: 'bar'}, res => {
  console.log('response', res);
});

function send(extensionId, msg, callback, retry = 20) {
  const timer = setTimeout(send, 100, extensionId, msg, callback, retry - 1);
  chrome.runtime.sendMessage(extensionId, msg, response => {
    if (!chrome.runtime.lastError || !retry) {
      clearTimeout(timer);
      callback(response);
    }
  });
}

the message sent from a webpage to a Chrome extension using chrome.runtime.sendMessage does not receive

Answer №1

Similar questions

Arrangement of 3 points on the graphical user interface

Using ng-bind-html does not offer protection against cross-site scripting vulnerabilities

Display the item prior to fetching the AJAX response

My controller in AngularJS is having trouble fetching the latest values of the $scope variables

The directive in an Angular app is not loaded due to lazy loading

Updating the FormArray index using Angular's `removeAt(i)` function does not reflect changes in the DOM

What is the most effective method of testing with jest to verify that a TypeScript Enum list contains all the expected string values?

How can I implement jQuery autocomplete with customized settings?

Invalid Syntax: The token '21' is found unexpectedly at column 12 in the expression [2013-08-28 21:10:14] beginning at [21:10:14]

Is the for loop in Node.js completed when making a MySQL call?

The yarn.lock file is failing to reflect the updated version of a dependency in package.json, even after running the yarn install command or simply using yarn to install the

Using AJAX to dynamically load Javascript

Updating and Preserving Content in Angular

"Challenges Arising in Deciphering a Basic JSON Array

Removing the JavaScript unicode character 8206 from a text string

Issue Arises in AngularJS where $scope values are not properly updating after ng-repeat loop

I am unable to pass a variable through a callback, and I cannot assign a promise to a

"Enhancing HTML with jQuery Autocomplete for Advanced Search Results

Tips for modifying environment variables for development and production stages

THREE.Raycaster delivering imprecise outcomes