将消息从 Chrome 扩展程序传递到网页

Pass a message from Chrome Extension to Webpage

本文关键字：网页 程序 扩展 消息 Chrome      更新时间：2023-09-26

我需要在Chrome扩展程序中传递一条消息（引发事件），并让网页上的JavaScript做出反应。

在扩展content_script.js，应该有一个类似

raiseXYZevent(data);

网页上的 JavaScript http://example.com/mypage.html应该执行一个处理程序

 function processXYZevent(data) { ... }

问题是扩展中的内容脚本不能直接与网页上的JavaScript交互（它只能修改DOM）。有没有办法从扩展中进行 DOM 更改，以某种方式从网页中检测它们并调用processXYZevent？

由于内容脚本和网页共享相同的 DOM，因此您可以使用window.postMessage()在它们之间发送消息。Chrome API 文档通过示例对此进行了详细说明：

将消息从页面发布到扩展程序

在内容脚本中，等待接收消息：

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);

在页面内部（这也包括您通过chrome.scripting.executeScript()或类似方式注入页面的代码），单击按钮时发送消息：

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

将消息从扩展发布到页面

上面的文档提到：

通过类似的手段，反之亦然。

为此，只需交换上述示例中的内容脚本代码和页面代码即可。

从内容脚本注入以下内容：

$('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>`)

在内容脚本中，您可以执行以下操作：

window.postMessage({ type: "FROM_CONTENT", text: "Something message here"}, "*")
相关文章：