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

Question

我有一个内容脚本，它将 iframe 注入(inject)到我页面的 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');