没有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中的事件,并在调用的数据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 +数据网址来加载iframe中的HTML:

   iframe.srcdoc = html;
   

   HTML将与父文档处于同一原点,因此框架内的内容可以简单地使用类似frameElement.remove();删除框架的内容(示例).由于此脚本可以直接访问父页面,因此html您插入的脚本必须值得信任.不要从不受信任的网站插入任意HTML!

3. 在web_accessible_resources中声明扩展页面,并在框架中加载扩展页面.然后,您可以使用扩展消息传递API在扩展的框架和背景之间进行通信.与以前的方法不同,此页面中的代码在扩展程序的原点中运行,因此您可以访问某些Chrome API(包括扩展消息传递或chrome.storage)和特定于原始数据(例如localStorage).

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