Question

我正在开发一个扩展，在每个页面的顶部添加一个自定义工具栏。为此，我从扩展名中注入 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，网址应该匹配什么？
还有其他方法可以从动态注入的iframe访问当前标签的DOM吗？
假设我需要此扩展程序在所有具有https://bitbucket.*.com网址格式的网址上运行，匹配应该是什么？

Answer 1

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

从扩展名和动态注入的iframe访问当前标签的DOM更新iframe DOM

1 个答案: