扩展程序弹出窗口中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时在网址中添加一个虚拟参数，例如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.
然后您可以使用消息:内容脚本会启动它，扩展脚本会注册一个听众.
Then you can use messaging: the content script initiates it, and the extension script registers a listener.
-
一次性一次性sendMessage:
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屋！
