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: - 网址（crbug.com/55084）的框架中投放内容脚本。

但有一些替代方案：

在嵌入框架的页面中，使用onmessage事件订阅iframe中的事件，并在调用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');

使用.srcdoc代替.src +数据网址在iframe中加载HTML：
```
iframe.srcdoc = html;
```
HTML与父文档的起源相同，因此框架内的内容可以简单地使用frameElement.remove();之类的内容来删除框架（example）。由于此脚本可以直接访问父页面，因此您插入的html必须值得信任。不要从不受信任的站点插入任意HTML！
在web_accessible_resources中声明扩展程序页面，并在框架中加载扩展程序页面。然后，您可以使用extension messaging APIs在框架和扩展背景之间进行通信。与以前的方法不同，此页面中的代码在您的扩展程序的原点中运行，因此您可以访问某些Chrome API（包括扩展消息传递或chrome.storage）和特定于原始数据（例如localStorage）。
```
iframe.src = chrome.runtime.getURL('name_of_your_page.html');
```

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

1 个答案: