扩展弹出窗口或后台脚本中的 iframe 的内容脚本答案

【问题标题】：Content script for iframe inside extension popup or background script扩展弹出窗口或后台脚本中的 iframe 的内容脚本
【发布时间】：2017-02-15 12:02:41
【问题描述】：

我正在尝试与位于 chrome 扩展弹出窗口中的 iframe 进行交互。我知道 content.js 可以使用 manifest.json 注入到所有框架中，但它是在网页内的框架上工作，而不是在扩展程序的弹出窗口内。

可行吗？我尝试了很多方法，但还没有找到解决方案。

我的清单：

{
"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"
    }
}

【问题讨论】：

你好，我添加了 manifest.json
您是否尝试将内容脚本注入到您自己的扩展或其他扩展的弹出窗口中的 iframe 中？在您的browser_action 中存在 popup.html 暗示它是您自己的，但没有明确说明。
请edit 成为主题：包括一个完整 minimal reproducible example 复制问题。通常，包括 manifest.json、一些背景、内容、弹出脚本和 HTML。寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括：►期望的行为，►特定问题或错误和►必要的最短代码重现它在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建 minimal reproducible example”、What topics can I ask about here? 和 How to Ask。
这是我自己的扩展的弹出窗口，其中的 iframe 来自不同的域。
我将使用文件和更多详细信息编辑问题

标签： iframe google-chrome-extension

【解决方案1】：

在您的内容脚本声明中使用 "all_frames": true 将其注入 iframe：

"content_scripts": [{
    "matches": [ "http://example.com/*" ],
    "js": [ "content.js" ],
    "all_frames": true
}],

要将此 iframe 与普通标签区分开来，您可以在创建 iframe 时向 URL 添加一个虚拟参数，例如http://example.com/?foo 所以你可以在 manifest.json 中匹配它，例如 "http://example.com/*foo*"。

那么就可以使用messaging：内容脚本发起，扩展脚本注册监听器。

简单的一次性发送消息：

content.js：

chrome.runtime.sendMessage('test', response => {
  console.log(response);
});

popup.js（或 background.js 等）：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  console.log('popup got', msg, 'from', sender);
  sendResponse('response');
});

长寿命端口：

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 等）：

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 的示例非常简单：

<html>
  <body>
    <iframe width="500" height="500" src="http://example.com"></iframe>
    <script src="popup.js"></script>
  </body>
</html>

当然，您也可以使用 DOM 操作以编程方式添加 iframe。

【讨论】：

感谢您的详细解答