Chrome扩展程序:将数据发送到使用chrome.windows.create创建的窗口

Chrome extension: sending data to window created with chrome.windows.create

本文关键字：windows chrome create 创建 窗口 程序 扩展 数据 Chrome      更新时间：2023-09-26

我正在努力寻找与我的Web应用程序进行通信的最佳方式，我在扩展中使用chrome.windows.create打开了该应用程序。

我已经正确处理了内容脚本和后台脚本之间的连接。我可以右键单击一个元素并将其值发送到后台脚本，后台脚本会创建一个包含我的 Web 应用程序的窗口。但是从那里我无法弄清楚如何在我的 Web 应用程序中访问和使用该值（它需要将值加载到编辑器中）。

我尝试在窗口和选项卡对象上设置 fns 和 var，但不知何故，一旦加载 Web 应用程序，它们就会从窗口对象中丢失。使用 chrome.tabs.executeScript，我可以摆弄 dom，但也不能在"窗口"上设置全局变量或任何内容。

如果没有更好的方法，我想我被迫添加到 DOM 并在加载我的 Web 应用程序后继续使用它，但它看起来很混乱。我希望有一种更干净的方法，比如设置一个onLoadFromExtension fn，我的Web应用程序可以执行它来获得它需要的值。

我找到了一种经过大量试验和错误后有效的方法，尽管它似乎仍然容易出错。而且它还取决于与已安装的扩展 ID 匹配的扩展 ID，因此如果无法硬编码，它将是另一条需要通过另一个通道传递的消息（阅读后，看起来可以硬编码，因为它是公钥的哈希，所以问题解决了）...开始认为操纵 DOM 不那么混乱了......

背景.js：

var selectedContent = null;
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    console.info("------------------------------- Got request", request);
    if (request.getSelectedContent) {
      sendResponse(selectedContent);        
    }
  });

网络应用：

var extensionId = "naonkagfcedpnnhdhjahadkghagenjnc";
  chrome.runtime.sendMessage(extensionId, {getSelectedContent: "true"},
    response => {
      console.info("----------------- Got response", response);
      if(response) {
        this.text = response;
      }
    });

manifest.json：

"externally_connectable": {
  "ids": ["naonkagfcedpnnhdhjahadkghagenjnc"],
  "matches": ["http://localhost:1338/*"]
},
  1. 在弹出窗口中，执行以下操作： 
    const parentWindow = window.opener
parentWindow.postMessage({ action: 'opened' })
window.onmessage = msg => {
  alert(JSON.stringify(msg.data)) // Alerts you with {"your":"data"}
}
  2. 在将调用 chrome.windows.create 的脚本中，执行以下操作： 
    window.onmessage = msg => {
  if (msg.data.action == 'opened') {
    msg.source.postMessage({ your: 'data' })
  }
}
  3. 呼叫chrome.windows.create时设置setSelfAsOpener: true

这是如何工作的？

由于 Chrome 扩展程序windows API 的限制，创建的窗口需要向其创建者（也称为 window.opener）发布消息，否则创建者将无法访问WindowProxy（对于将消息发布到创建的窗口很有用）。

相关文章：