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

Question

我正在编写一个非常简单的谷歌浏览器扩展程序，但是面对如此众多的问题，对于这样一个如此悲惨的规模的项目来说，它有点压倒性。

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

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

方法＃1

我尝试在当前文档的主体上附加一个简单的不透明div ，其position: fixed; ， z-index: 2147483647; 宽度/高度为100％。 这有用，但是：

• 页面的CSS一直在干扰我div的元素。
• Flash内容偶尔出现在它上面（至少在Windows XP上）。 追逐embed页面并将wmode设置为“透明”没有帮助，偏移到-10000px或设置display:none; 只是缓解但没有解决问题。 另见这个问题 。

方法＃2

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

• 显然，由于跨源策略，无法访问iframe的内容。 那个访问 - 我需要它将处理程序分配给用户输入答案的输入字段，我需要记住谁从我的答案输入字段中窃取了焦点，一旦问题得到解答等就将其回复等等。 。
• 使用消息传递对我来说不起作用，我甚至不确定我是否应该使它工作，因为消息传递使整个事情过于复杂并且禁止我将应用程序用作简单的网页（即不作为扩展）。 为什么甚至打扰？

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

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

PS我想在某些时候有人会问我是否有代码可以共享。 我知道，但有很多。 您希望看到哪一部分？

Answer 1

方法＃2

关注＃1

显然，由于跨源策略，无法访问iframe的内容。 那个访问 - 我需要它将处理程序分配给用户输入答案的输入字段，我需要记住谁从我的答案输入字段中窃取了焦点，一旦问题得到解答等就将其回复等等。

是的，您访问iframe的内容，了解网页的所有代码，没有CSP等。

注入iframe的内容脚本。

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

样本实施

的manifest.json

{
    "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>"
    ]
}

myscript.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);

anotherscript.js

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

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

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

关注＃2

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

你想要实现什么？

Answer 2

完全忘记了这个问题...最后，我使用消息传递方法2与iframe进行通信，它工作得非常好。 这是对那些有兴趣阅读代码的人的扩展回购： https ： //github.com/olegskl/invasive-kanji