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

时间:2017-09-29 11:22:45

标签: javascript google-chrome iframe google-chrome-extension cors

  

内容脚本无法注入扩展页面   chrome-extension:// scheme。

只需在iFrame中加载页面,我不希望/需要在其中加载内容脚本,因此用户可以充分利用这两个世界或者拥有自己的蛋糕并吃掉它,我的标签管理器扩展和来自Chrome商店的他们最喜欢的 default new tab extension

我的实验

我从其他扩展程序的选项页面中打开了开发工具

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

附加了此HTML代码段,向dom添加了iframe

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

iFrame加载但它是空白页面,其中包含不可见的html元素(未加载资源,未应用样式且未执行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工具栏吗?)。

*“secure”意味着一个相对框架/窗口不能访问扩展页面的另一个相对框架的DOM或操纵它(在其中执行JS)。 (relative = child / parent / sibling) Chrome已经使用原生默认pdf插件iframe执行此操作。

1 个答案:

答案 0 :(得分:0)

我有同样的问题! :)我得到它只适用于为它设置的扩展。我测试了两个解压扩展,因此两者都没有。从扩展程序ID omf...,我想加载页面表单扩展程序ID oii...

解决方案

  • omf中,我在<div id="container"/>中添加了<script src="popup.js"/>popup.html
  • omfpopup.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在其web_accessible_resources manifest entry中声明quux.html时才有效。具体而言,oii具有以下部分清单:

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

如果我从quux.html的{​​{1}}部分删除了web_accessible_resources,那么oii中的<iframe>就会向我显示您拒绝执行的“拒绝执行”消息

调试辅助工具

有趣的是,就我而言,“拒绝执行”错误消息实际上是针对内置Chrome错误页面omf中的脚本。我可以通过手动将错误消息中的chrome-extension://invalid/值复制到hash中的content_security_policy清单条目来加载该页面。例如,在omf的{​​{1}}:

omf

包含与错误消息一样多的以空格分隔的manifest.json条目。每个错误消息都与具有自己的哈希的特定脚本相关,并且消息会仔细地告诉您哈希!所以,如果你有四个错误,你最终会得到:

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

sha256 1..4替换为四个错误消息中的实际哈希值。如果您遇到脚本问题,并且您确信脚本是安全的,则可以添加其哈希值并重试。请注意,更改"content_security_policy": "script-src 'self' 'sha256-1' 'sha256-2' 'sha256-3' 'sha256-4'" 时必须重新加载整个扩展程序。

(在上面的示例中,sha256-default policy的一部分,因此我在测试期间将其保留。content_security_policyobject-source 'self'和{{ 1}}来自this section of the docs。)

安全

你问过安全问题。根据woxxom here,权限遵循页面原点。在我的测试中就是这种情况,所以我觉得你很好。

  • blob拥有filesystem权限,而chrome-extension-resource则没有。如果我跑

    omf

    tabs的上下文中,我为每个打开的标签获得了oii。如果我在chrome.windows.getAll({populate:true},function(wins){console.log(wins);}) 的上下文中运行它,则不会获得omf或需要url权限的任何其他信息。

  • 同样,在oiiurl oii的iframe索引 tabsomfwindow.frames[ iframe,]未定义。

  • 但是,如果我从undefined的弹出框中加载oii iframe,则iframe和父级可以通过window.parentomf以及iframe相互通信可以访问omf权限。