来自Chrome扩展程序弹出框的iframe中的content.js [英] content.js in iframe from chrome-extension popup

问题描述

我正在尝试与位于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：[http://example.com/*]，
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 =http://example.com>< / 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",
  "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"
    }
}

解决方案

Use "all_frames": true in your content script declaration to inject it into an iframe inside the popup:

"content_scripts": [{
    "matches": [ "http://example.com/*" ],
    "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="http://example.com"></iframe>
  </body>
</html>

这篇关于来自Chrome扩展程序弹出框的iframe中的content.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！