4

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

扩展是一个非常简单的扩展：到达任何页面（例如 google.com）后，页面内容被隐藏，用户面临一个问题，他必须正确回答......或者被重定向到其他页面提供正确答案的页面。换言之，除非他正确回答问题，否则用户不能访问互联网上的页面。

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

方法#1

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

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

方法#2

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

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

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

我很感激，但实际上并不需要代码作为答案。提示或推动正确的方向也一样好。

PS我想在某些时候有人会问我是否有代码要分享。我有，但有一堆。您具体想看哪一部分？

4

2 回答 2

5

方法#2

关注#1

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

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

注入 iframe 的内容脚本。

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

示例实现

清单.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);

另一个脚本.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在状态期间运行的确实在动态生成的 iframe 中执行，但是您可以随时通过chrome.tabs.executeScript()document idle重新运行内容脚本。

关注#2

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

你想达到什么目标？

于 2013-01-29T17:44:56.780 回答
3

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

于 2014-02-19T20:58:00.860 回答