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

Question

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

在content_script.js扩展中，应该有一个类似的功能

raiseXYZevent(data);

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

 function processXYZevent(data) { ... }

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

Answer 1

由于内容脚本和网页共享同一个 DOM，您可以使用postMessage它们在它们之间发送消息。Chrome API 文档通过示例详细解释了这一点。

Answer 2

从内容脚本中注入：

$('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"}, "*")