Sample Chrome Extension Message Passing Background to Content Script Manifest V3

background.js

try {
  // This is the background script for the extension

  // A listener for when the user clicks on the extension button
  //   chrome.action.onClicked.addListener(buttonClicked);

  chrome.action.onClicked.addListener(buttonClicked);

  // Handle that click
  function buttonClicked(tab) {
    // Send a message to the active tab
    console.log("button clicked!");

    // Send a message to the tab that is open when button was clicked
    console.log("sending message");
    chrome.tabs.sendMessage(tab.id, { message: "browser action" });
  }

  // Listening for messages
  chrome.runtime.onMessage.addListener(receiver);

  function receiver(request, sender, sendResponse) {
    if (request.message === "thank you") {
      // Not doing anything for messages received but I could!
    }
  }
} catch (err) {
  console.log(err);
}

content.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(
    sender.tab
      ? "from a content script:" + sender.tab.url
      : "from the extension"
  );
  if (request.greeting === "hello") sendResponse({ farewell: "goodbye" });
});

manifest.json

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "Manifest 3 first version",
  "content_scripts": [{ "matches": ["<all_urls>"], "js": ["content.js"] }],
  "background": {
    "service_worker": "background.js"
  },
  "action": { "default_icon": "icon.png" }
}

All go in the root directory.
You can add an icon.png in the root directory. Otherwise it will use a default icon- a blue puzzle piece.

Thank you for sharing your code. I'm trying to understand how to send messages, specially from background to scripts. I tried your code and I got an error:Uncaught (in promise) Error: The message port closed before a response was received.

Me too I get the following error:
Uncaught (in promise) Error: The message port closed before a response was received.

@FedericoGentile and @rypptc I got that error too. Not sure why. But the extension still works and seems to send the message even with the error.

also getting this error message, MV3 seems messy.

also getting this error message, MV3 seems messy.

Try to add return true; after Line 7

I get the following error:
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

@imprintnext-raj same issue, lol

@imprintnext-raj same issue, sos

@imprintnext-raj I am running into this issue as well

@FlamedDogo99 , try to inject the listener before you send the message. So, add run_at in the content_scripts prop on the manifest file. This should resolve the issue.

"content_scripts": [
    {
      "matches": ["<all_urls>"], "js": ["content.js"]
      "run_at": "document_start"
    }
  ],

Did someone fix them?

background.js:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.