覆盖来自 Google Chrome 扩展程序的页面内容

Question

我正在编写一个非常简单的 Google Chrome 扩展程序，但遇到了如此多的问题，以至于对于一个规模如此庞大的项目来说，这有点不知所措。

扩展程序非常简单：到达任何页面（例如 google.com）时，页面内容都被隐藏，用户面临一个问题，他必须正确回答……或者被重定向到其他页面提供正确答案的页面。换句话说，除非用户正确回答问题，否则他无法访问 Internet 上的页面。

为了隐藏页面内容，我决定使用以下方法进行简单的叠加：

方法#1

我试图附加到当前文档的主体上的简单不透明div带position: fixed;，z-index: 2147483647;并在100％的宽度/高度。那行得通，但是：

• 页面的 CSS 不断干扰我的div.
• Flash 内容偶尔会出现在它上面（至少在 Windows XP 上）。embed在整个页面上追逐s 并设置wmode为“透明”没有帮助，偏移到 -10000px 或设置 display:none;只是缓解但没有解决问题。另请参阅此问题。

方法#2

我尝试在iframe创建并注入页面的 GUI 中沙箱化，使其行为div与上述方法完全相同。它完美地解决了第一种方法的问题，但是：

• 显然，iframe由于跨域策略，无法访问 的内容。还有那个访问权限——我需要它为用户输入答案的输入字段分配处理程序，我需要记住谁从我的答案输入字段中窃取了焦点，以便在问题得到回答后将其返回，等等。等等。 .
• 使用消息传递对我不起作用，我什至不确定我是否应该让它工作，因为消息传递使整个事情变得过于复杂，并禁止我将应用程序用作简单的网页（即不作为扩展）。为什么还要打扰？

所以......我的方法哪里错了？有没有我不知道的第三个或第四个？

我很欣赏但并不真正需要代码作为答案。提示或推动正确的方向也一样好。

PS 我想在某个时候有人会问我是否有代码要分享。我有，但有一堆。你特别想看哪个部分？

Answer 1

方法#2

关注#1

显然，由于跨域策略，无法访问 iframe 的内容。还有那个访问权限——我需要它为用户输入答案的输入字段分配处理程序，我需要记住谁从我的答案输入字段中窃取了焦点，以便在问题得到回答后将其返回，等等。等等。

是的，您可以访问 iframe 的内容，包括网页的所有代码，没有 CSP 等。

注入 iframe 的内容脚本。

我建议这是最好的方法，您可以将脚本注入动态生成的 iframe，如下所示并获取内容

示例实现

清单文件

{
    "name": "Iframe",
    "description": "",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "myscript.js"
            ],
            "run_at": "document_end"
        },
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "anotherscript.js"
            ],
            "all_frames": true
        }
    ],
    "permissions": [
        "<all_urls>"
    ]
}

我的脚本.js

var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.facebook.com/plugins/like.php?href=http://allofrgb.blogspot.in/");
iframe.setAttribute("style", "border:none; width:150px; height:30px");
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("frameborder", "0");
document.body.appendChild(iframe);

另一个脚本.js

iframes = document.getElementsByTagName("iframe");
for (iframe in iframes){
    console.log(iframes[iframe].src);
}
console.log("In another Script");

如果您观察控制台记录的消息，您会观察到消息被记录两次（documentlog + iframelog + [any number of optional iframes in pages]*）

anotherscript.js在document idle状态期间运行的确实在动态生成的 iframe 中执行，您如何随时通过chrome.tabs.executeScript()重新运行内容脚本。

关注#2

使用消息传递对我不起作用，我什至不确定我是否应该让它工作，因为消息传递使整个事情变得过于复杂，并禁止我将应用程序用作简单的网页（即不作为扩展）。为什么还要打扰？

你想达到什么目标？