方法＃1

Question

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

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

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

方法＃1

我尝试将当前文档的正文附加到div，position: fixed;，宽度/高度为100％的简单不透明z-index: 2147483647;。这很有效，但是：

网页的CSS一直干扰我div内的元素。
偶尔会出现Flash内容（至少在Windows XP上）。在整个页面中追逐embed并将wmode设置为 “透明”没有帮助，抵消-10000px或设置 display:none;只是缓解但没有解决问题。另请参阅this question。

方法＃2

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

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

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

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

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

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 log + iframe log + [any number of optional iframes in pages]*）

在anotherscript.js个状态期间运行的

document idle会在动态生成的iframe中执行，您可以随时通过chrome.tabs.executeScript()重新运行内容脚本。

关注＃2

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

你想要达到什么目标？

Answer 2

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

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

方法＃1

方法＃2

2 个答案:

方法＃2

关注＃1

内容脚本注入iframe。

示例实施

的manifest.json

myscript.js

anotherscript.js

关注＃2