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

Question

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

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

如何运行我的内容脚本在此 iframe 上？还是跟后台沟通？我需要从此代码触发 "close my iframe" 事件。我知道这是可能的，因为亲爱的正在这样做。

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

Answer 1

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

虽然还有一些选择：

在嵌入框架的页面中，使用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');

使用 .srcdoc 而不是 .src+data URLs 在 iframe 中加载 HTML:
```
iframe.srcdoc = html;
```
HTML 将与父文档处于同一来源，因此框架内的内容可以简单地使用类似 frameElement.remove(); 的内容来删除框架 (example)。由于此脚本可以直接访问父页面，因此您插入的 html 必须是可信的。不要从不受信任的站点插入任意 HTML！
在 web_accessible_resources, and load the extension page in the frame. Then you can use the extension messaging APIs to communicate between the frame and the background of the extension. Unlike the previous methods, the code in this page runs in the origin of your extension, so you have access to some Chrome APIs (including extension messaging or chrome.storage) 和源特定数据（例如 localStorage）中声明一个扩展页面。
```
iframe.src = chrome.runtime.getURL('name_of_your_page.html');
```

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

Chrome Extension content script on iframe without src attribute

html

javascript

iframe

google-chrome-extension