jquery 从Chrome扩展程序向网页传递消息

w1jd8yoj  于 2023-03-29  发布在  jQuery
关注(0)|答案(2)|浏览(173)

我需要在Chrome扩展中传递一条消息(引发一个事件),并让网页上的JavaScript对此做出React。
在扩展的content_script.js中,应该有如下函数

raiseXYZevent(data);

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

function processXYZevent(data) { ... }

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

hmae6n7t

hmae6n7t1#

由于内容脚本和网页共享相同的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);

从扩展发布消息到页面

上述文档提到:
通过类似的手段也可以实现相反的情况。
为此,只需交换上面示例中的内容脚本代码和页面代码。

i34xakig

i34xakig2#

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

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

相关问题