Pass a message from Chrome Extension to Webpage

Question

I need to pass a message (raise an event) in a Chrome extension, and have JavaScript on a web page react to it.

In content_script.js of the extension, there should be a function like

raiseXYZevent(data);

JavaScript on the web page http://example.com/mypage.html should execute a handler

 function processXYZevent(data) { ... }

The problem is that content script within an extension cannot interact with JavaScript on the web page directly (it can only modify DOM). Is there a way to make DOM changes from the extension, somehow detect them from the web page and call processXYZevent?

Maybe a change event on a hidden field, or similarly a hidden button click? — Reinstate Monica Cellio, Sep 26 '13 at 18:05
or this... http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script — Reinstate Monica Cellio, Sep 26 '13 at 18:08

score 6 · Answer 1 · edited Mar 22 '23 at 18:20

Since the content script and the webpage share the same DOM, you can use window.postMessage() to send messages between them. The Chrome API documentation explains this in detail with examples:

Posting a message from the page to the extension

Inside the content script, waiting to receive the message:

var port = chrome.runtime.connect();

window.addEventListener("message", (event) => {
  // We only accept messages from ourselves
  if (event.source !== window) {
    return;
  }

  if (event.data.type && (event.data.type === "FROM_PAGE")) {
    console.log("Content script received: " + event.data.text);
  }
}, false);

Inside the page (this also includes code you have injected into the page via chrome.scripting.executeScript() or similar), sending a message when a button is clicked:

button.addEventListener("click", () => {
  window.postMessage({
    type : "FROM_PAGE", 
    text : "Hello from the webpage!"
  }, "*");
}, false);

Posting a message from the extension to the page

The docs above mention:

The reverse is possible through similar means.

To do this, simply swap the content script code and the page code in the examples above.

The example sends a message from the webpage to the extension. Does it work in the opposite direction? — dbkk, Sep 27 '13 at 10:21
From the text: "In this way, the page establishes a line of communication to the extension process. The reverse is possible through similar means." So yes. — Matthew Gertner, Sep 27 '13 at 10:37
@Ascherer I've fixed the link and made a few more updates since this answer is around a decade old. — mikemaccana, Mar 22 '23 at 18:14

Hender · Answer 2 · 2020-03-29T20:47:09.847

From content script inject this:

$('html').append(`
    <script>

      window.addEventListener("message", function(event) {
       // We only accept messages from ourselves
       if (event.source != window)
         return;

        if (event.data.type && (event.data.type == "FROM_CONTENT")) {
          console.log("Page script received: " + event.data.text)
          console.log(event.data.text) // "Something message here"
        }
      }, false)
    <\/script>`)

In content script you can execute this:

window.postMessage({ type: "FROM_CONTENT", text: "Something message here"}, "*")

Pass a message from Chrome Extension to Webpage

2 Answers2

Posting a message from the page to the extension

Posting a message from the extension to the page

Linked