我正在尝试与位于Chrome扩展程序弹出窗口中的iframe进行交互。我知道content.js可以使用manifest.json在所有框架中注入,但是它可以在网页中使用框架,而不是在扩展的弹出框中使用。
它可行吗?我尝试了很多东西,但是我还没有找到解决方案。
我的清单:
{name:test,version:1.0,manifest_version:2,description: Scrapping Facebook,permissions:[cookies,background,tabs,http:// * / * ,https:// * / *,存储,unlimitedStorage],图标:{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中: content_scripts:[{matches:[example/*],js:[ content.js],all_frames:true }],
然后您可以使用消息:内容脚本启动它,弹出脚本注册一个监听器。
-
一次性sendMessage:
content.js:
chrome.runtime.sendMessage('test',function(response){的console.log(响应); );popup.js:
chrome.runtime.onMessage.addListener(函数(msg,sender,sendResponse){ console.log('popup got',msg,'from',发件人); sendResponse('response'); }); -
长期存取的港口:
content.js:
var port = chrome.runtime.connect({name:'测试'}); port.onMessage.addListener(函数(msg,port){ console.log(msg); }); port.postMessage('from-iframe');popup.js:
var iframePort; //如果你想稍后在另一个函数中改变它的行为 chrome.runtime.onConnect.addListener(function(port){ iframePort = port; port.onMessage .addListener(函数(msg,port){ console.log(msg); }); port.postMessage('from-popup'); });
和popup.html:
< html> < head> < script src =popup.js>< / script> < / head> < body> < iframe width =500height =500src =example>< / iframe> < / body> < / html>
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.
my manifest :
{ "name" :"test", "version": "1.0", "manifest_version": 2, "description" :"Scraping Facebook", "permissions": [ "cookies", "background", "tabs", "*/*", "*/*", "storage", "unlimitedStorage" ], "icons": { "128": "images/pint.png" }, "content_scripts": [ { "matches": [ "*/*", "*/*" ], "js": ["jquery-3.1.0.min.js","content.js"], "run_at":"document_end" } ], "web_accessible_resources": [ "*/*", "*/*", "styles/*", "fonts/*" ], "background": { "scripts": ["background.js"] }, "browser_action" : { "default_popup": "popup.html", "default_title": "test" } }解决方案
Use "all_frames": true in your content script declaration to inject it into an iframe inside the popup:
"content_scripts": [{ "matches": [ "example/*" ], "js": [ "content.js" ], "all_frames": true }],Then you can use messaging: the content script initiates it, and the popup script registers a listener.
Trivial one-time sendMessage:
content.js:
chrome.runtime.sendMessage('test', function(response) { console.log(response); );popup.js:
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { console.log('popup got', msg, 'from', sender); sendResponse('response'); });Long-lived port:
content.js:
var port = chrome.runtime.connect({name: 'test'}); port.onMessage.addListener(function(msg, port) { console.log(msg); }); port.postMessage('from-iframe');popup.js:
var iframePort; // in case you want to alter its behavior later in another function chrome.runtime.onConnect.addListener(function(port) { iframePort = port; port.onMessage.addListener(function(msg, port) { console.log(msg); }); port.postMessage('from-popup'); });
And popup.html:
<html> <head> <script src="popup.js"></script> </head> <body> <iframe width="500" height="500" src="example"></iframe> </body> </html>
更多推荐
来自Chrome扩展程序弹出框的iframe中的content.js
发布评论