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

Question

我正在编写一个非常简单的 Google Chrome 浏览器扩展程序，但遇到了如此多的问题，以至于对于规模如此惨淡的元素来说有点不知所措。

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

为了隐藏页面内容，我决定使用以下方法进行简单的覆盖:

方法#1

我尝试在当前文档的正文中附加一个简单的不透明 div，其中包含 position: fixed;、z-index: 2147483647; 和 width/高度为 100%。那行得通，但是:

• 页面的 CSS 不断干扰我的 div 中的元素。
• Flash 内容偶尔会出现在它上面(至少在 Windows XP 上是这样)。在整个页面追逐 embed 并将 wmode 设置为“透明”没有帮助，偏移到 -10000px 或设置display:none;只是缓解了问题，并没有解决问题。另见 this question .

方法#2

我尝试在一个 iframe 中对 GUI 进行沙盒化，该 iframe 创建并注入(inject)到页面中，以与上述方法中的 div 完全一样。它完美地解决了第一种方法的问题，但是:

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

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

我很感激，但并不真的需要代码作为答案。向正确方向的提示或插入也同样好。

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

Answer 1

方法#2

关注#1

Apparently there's no way to access the contents of the iframe because of cross-origin policy. And that access – I need it to assign handlers to the input field where the user is typing the answer, I need to remember who's stealing the focus from my answer input field to give it back once the question is answered, etc. etc. etc

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

注入(inject) iframe 的内容脚本。

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

示例实现

list .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>"
    ]
}

我的脚本.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");

如果您观察控制台记录的消息，您会观察到消息被记录了两次(document log + iframe log + [页面中任意数量的可选 iframe]*)

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

关注 #2

Using Message Passing didn't work for me and I'm not even sure if I should make it work because messaging makes the entire thing overly complex and prohibits me from using the application as a simple webpage (i.e. not as an extension). Why even bother?

你想达到什么目的？