javascript - 如何在我的扩展程序的新标签页中将其他扩展程序的新标签页加载为 iFrame

Question

content scripts can't be injected into extension pages with chrome-extension:// scheme.

只需将页面加载到 iFrame 中，我不想/不需要在其中加载内容脚本，因此用户可以两全其美，或者吃蛋糕也吃，我的选项卡管理器扩展和他们最喜欢的 default new tab extension 来自 chrome 商店。

我的实验

我从另一个扩展的选项页面打开了开发工具，

chrome-extension://ckkdlimhmcjmikdlpkmbgfkaikojcbjk/content/options.html

附加此 HTML 片段，向 dom 添加 iframe

<iframe src="chrome-extension://hddnkoipeenegfoeaoibdmnablmgkpip/newtab.html">
</iframe>

iFrame 已加载，但它是带有不可见 html 元素的空白页面(未加载 Assets ，未应用样式且未执行 JS)

控制台中的错误消息

Denying load of chrome-extension://hddnkoipeenegfoeaoibdmnablmgkpip/newtab.html. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-AmiIBiDMlUtAs2tJB7jErMe/d3rBPYNUQQIZZdI0/mw='), or a nonce ('nonce-...') is required to enable inline execution.

多个~与第二条错误信息相同

必须有一种安全*的方式来在另一个扩展的页面中显示来自一个扩展的页面，这是一种适当的、有效的使用， 同时您可以拒绝工具栏扩展(还记得 pre-chrome Internet Explorer 工具栏吗？)。

* “安全”意味着一个相关框架/窗口不能访问扩展页面的另一个相关框架的 DOM 或操作它(在其中执行 JS)。 (亲戚 = child / parent / sibling ) Chrome 已经使用 native 默认 pdf 插件 iframe 做到了这一点。

Answer 1

我也有同样的疑问! :) 我得到它只适用于为它设置的扩展。我测试了两个解压缩的扩展，所以商店里没有。来自扩展 ID omf... ，我想加载一个页面表单扩展 ID oii... .

解决方案

• 在 omf ，我放了一个 <div id="container"/>和一个 <script src="popup.js"/>在我的 popup.html .

• 在 omf , 在 popup.js ，我做了:

  let pc = document.getElementById('container');
  let iframe = document.createElement('iframe');
  iframe.src = "chrome-extension://oiifekahljigbmnkdacklolgniafenlj/quux.html";
  pc.appendChild(iframe);
  

  而且效果很好。
  注意我在之后做了这个 onload的 popup.html - 我之前没试过onload .

警告

它只在目标扩展时有效，oii , 宣布 quux.html在其 web_accessible_resources manifest entry .具体来说，oii具有以下部分 list :

{
  "name": "test",
  "manifest_version": 2,
  ...
  "web_accessible_resources": [
    "quux.html"
  ]
}

如果我删除了 quux.html来自 web_accessible_resources oii 中的部分, 然后是 <iframe>在 omf给了我你看到的“拒绝执行”消息。

调试辅助工具

有趣的是，在我的案例中，“拒绝执行”错误消息实际上是针对内置 Chrome 错误页面中的脚本的 chrome-extension://invalid/ .我能够通过手动复制 hash 来加载该页面将错误消息中的值放入 content_security_policy omf 中的 list 条目.例如，在 omf的 manifest.json :

"content_security_policy": "script-src 'self' 'sha256-AmiIBiDMlUtAs2tJB7jErMe/d3rBPYNUQQIZZdI0/mw=' blob: filesystem: chrome-extension-resource: ; object-src 'self'"

用尽可能多的空格分隔sha256条目，因为有错误消息。每条错误消息都与具有自己哈希值的特定脚本相关，并且这些消息深思熟虑地告诉您哈希值!所以，如果你有四个错误，你会得到:

"content_security_policy": "script-src 'self' 'sha256-1' 'sha256-2' 'sha256-3' 'sha256-4'"

与 sha256- 1..4 由四个错误消息中的实际哈希值替换。如果您遇到脚本问题，并且您确信脚本是安全的，您可以添加它们的哈希值并重试。请注意，更改 content_security_policy 时必须重新加载整个扩展。 .

(在上面的示例中，object-source 'self' 是 default policy 的一部分，因此我在测试期间将其保留。blob、filesystem 和 chrome-extension-resource 来自 this section of the docs。)

安全

您问的是安全问题。每 woxxom here , 权限遵循页面来源。我的测试就是这种情况，所以我认为你很好。

• omf有 tabs许可，和oii才不是。如果我跑

  chrome.windows.getAll({populate:true},function(wins){console.log(wins);})
  

  在omf的上下文，我得到了 url对于每个打开的选项卡。如果我在 oii 中运行它的上下文，我没有得到 url或任何其他需要 tabs 的信息允许。

• 同样，在omf , window.frames[ oii 的 iframe 索引 ]是undefined ，并在 oii内嵌框架，window.parent未定义。

• 但是，如果我加载 omf来自 omf 的 iframe的弹出窗口，iframe 和父级可以通过 window.frames 相互通信和 window.parent ，并且 iframe 可以访问 tabs许可。