从扩展中动态注入的 iframe 访问当前选项卡的 DOM 并更新 iframe DOM答案

【问题标题】：Access current tab's DOM from dynamically injected Iframe from extension & update iframe DOM从扩展中动态注入的 iframe 访问当前选项卡的 DOM 并更新 iframe DOM
【发布时间】：2017-04-30 16:16:54
【问题描述】：

我正在开发一个扩展程序，它在每个页面的顶部添加一个自定义工具栏。为此，我从扩展中注入 toolbar.html。由于我是初学者，我不确定如何访问当前选项卡的 DOM 元素以及如何使用当前选项卡的 DOM 中的数据更新新添加的 iframe。

这是清单：

{
  "manifest_version": 2,

  "name": "My Extension",
  "description": "Extension to show custom toolbar",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background":{
      "scripts":["background.js"]
  },
  "content_scripts":[{
      "matches":["https://bitbucket.mycompany.com/*"],
      "css":["styles.css"],
      "js":["jquery.js","myscript.js"],
      "all_frames":true
  }],
    "web_accessible_resources":[
        "toolbar.html",
        "styles.css"
    ]
}

内容脚本是 myscript.js

var url=chrome.extension.getURL('toolbar.html');
var height='35px';
var iframe="<iframe src='"+url+"' id='myCustomBar' style='height:"+height+"'></iframe>"

$('html').append(iframe);

$('body').css({
    'transform':'translateY('+height+')'
});

我的问题是：

如果我使用单独的内容脚本（在此处回答： access iframe content from a chrome's extension content script) 对于 iframe，URL 应该匹配什么？
还有其他方法可以从动态注入的 iframe 访问当前选项卡的 DOM 吗？
假设我需要此扩展程序在所有具有类似https://bitbucket.*.com 的 URL 模式的 URL 上运行，匹配项应该是什么？

【问题讨论】：

标签： javascript google-chrome iframe google-chrome-extension content-script

【解决方案1】：

您不能为该 iframe 使用单独的内容脚本，因为 iframe 的 src 以 chrome-extensions:// 开头，默认情况下不允许将内容脚本注入其中。
您可以为toolbar.html 添加一个脚本标签，然后使用Window.postMessage 在toolbar.js 和父内容脚本之间进行消息传递。
根据Match patterns，如果'*'在主机中，它必须是第一个字符。因此，您可能需要使用 https://*.com 之类的内容并检查代码中的其他部分。

【讨论】：