扩展弹出窗口或后台脚本中 iframe 的内容脚本 [英] Content script for iframe inside extension popup or background script
问题描述
我正在尝试与位于 chrome-extension 弹出窗口中的 iframe 进行交互.我知道可以使用 manifest.json 将 content.js 注入到所有框架中，但它可以在网页内处理框架，而不是在扩展程序的弹出窗口内.
I am trying to interact with an iframe located in a chrome-extension popup. I know content.js can be injected in all frame using the manifest.json but it's working with frame inside a webpage and not inside the extension's popup.
可行吗?我尝试了很多方法，但还没有找到解决方案.
Is it doable ? I tried many things but I didn't find a solution yet.
我的清单:
{
"name" :"test",
"version": "1.0",
"manifest_version": 2,
"description" :"Scraping Facebook",
"permissions": [
"cookies",
"background",
"tabs",
"http://*/*",
"https://*/*",
"storage",
"unlimitedStorage"
],
"icons": { "128": "images/pint.png" },
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["jquery-3.1.0.min.js","content.js"],
"run_at":"document_end"
}
],
"web_accessible_resources": [
"http://*/*",
"https://*/*",
"styles/*",
"fonts/*"
],
"background": {
"scripts": ["background.js"]
},
"browser_action" :
{
"default_popup": "popup.html",
"default_title": "test"
}
}
推荐答案
在您的内容脚本声明中使用 "all_frames": true 将其注入 iframe:
Use "all_frames": true in your content script declaration to inject it into an iframe:
"content_scripts": [{
"matches": [ "http://example.com/*" ],
"js": [ "content.js" ],
"all_frames": true
}],
要将此 iframe 与普通选项卡区分开来，您可以在创建 iframe 时向 URL 添加一个虚拟参数，例如http://example.com/?foo 这样你就可以像 "http://example.com/*foo*" 一样在 manifest.json 中匹配它示例.
To differentiate this iframe from normal tabs you can add a dummy parameter to the URL when you create the iframe e.g. http://example.com/?foo so you can match it in manifest.json like "http://example.com/*foo*" for example.
然后就可以使用messaging:内容脚本发起，扩展脚本注册一个听众.
Then you can use messaging: the content script initiates it, and the extension script registers a listener.
简单的一次性发送消息:
Trivial one-time sendMessage:
content.js:
content.js:
chrome.runtime.sendMessage('test', response => {
console.log(response);
});
popup.js(或 background.js 等):
popup.js (or background.js and so on):
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
console.log('popup got', msg, 'from', sender);
sendResponse('response');
});
长寿命端口:
Long-lived port:
content.js:
content.js:
let port = chrome.runtime.connect({name: 'test'});
port.onMessage.addListener((msg, port) => {
console.log(msg);
});
port.postMessage('from-iframe');
popup.js(或 background.js 等):
popup.js (or background.js and so on):
let iframePort; // in case you want to alter its behavior later in another function
chrome.runtime.onConnect.addListener(port => {
iframePort = port;
port.onMessage.addListener((msg, port) => {
console.log(msg);
});
port.postMessage('from-popup');
});
popup.html 的一个例子非常简单:
An example of popup.html is really straightforward:
<html>
<body>
<iframe width="500" height="500" src="http://example.com"></iframe>
<script src="popup.js"></script>
</body>
</html>
当然，您也可以使用 DOM 操作以编程方式添加 iframe.
Of course you can also add the iframe(s) programmatically using DOM manipulation.
这篇关于扩展弹出窗口或后台脚本中 iframe 的内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
