没有 src 属性的 iframe 上的 Chrome 扩展内容脚本

Question

我有一个内容脚本，它将 iframe 注入我页面的 DOM。此 iframe 没有 src 属性，我正在使用它的内容动态创建它...

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

如何在这个 iframe 上运行我的内容脚本？还是与后台沟通？我需要从此代码触发“关闭我的 iframe”事件。我知道这是可能的，因为蜂蜜正在这样做。

https://chrome.google.com/webstore/detail/honey/bmnlcjabgnpnenekpadlanbbkooimhnj?hl=en-US

Answer 1

您不能在 data:-URL (crbug.com/55084) 的框架中运行内容脚本。

虽然有一些选择：

1. 在嵌入框架的页面中，使用onmessage 事件从iframe 订阅事件，并在data-URL 框架中插入调用parent.postMessage 的脚本。

   // Content script in parent frame.
   // Assuming that variable iframe exists, and that it is an iframe.
   window.addEventListener('message', onMessage);
   function onMessage(event) {
       if (event.source === iframe && event.message === 'close') {
           window.removeEventListener('message', onMessage); // Clean-up
           iframe.remove();
       }
   }
   
   // In the iframe
   parent.postMessage('close');
   

2. 使用.srcdoc 而不是 .src+data URL 在 iframe 中加载 HTML：

   iframe.srcdoc = html;
   

   HTML 将与父文档位于同一来源，因此框架内的内容可以简单地使用 frameElement.remove(); 之类的东西来删除框架 (example)。 由于此脚本可以直接访问父页面，因此您插入的html 必须是可信的。不要从不受信任的站点插入任意 HTML！

3. 在web_accessible_resources中声明一个扩展页面，并在框架中加载扩展页面。然后你可以使用extension messaging APIs在框架和扩展的背景之间进行通信。与之前的方法不同，此页面中的代码在您的扩展程序的源中运行，因此您可以访问一些 Chrome API（包括扩展程序消息或chrome.storage）和特定于源的数据（例如 localStorage）。

   iframe.src = chrome.runtime.getURL('name_of_your_page.html');