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 · answered Sep 27 '13 at 10:15

6

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

answered Sep 27 '13 at 10:15

Matthew Gertner

4,409
2
31
54

2

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
This link is dead – Ascherer Jun 02 '21 at 22:00

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

Linked