Javascript 覆盖Google Chrome扩展的页面内容

我正在写一个非常简单的Google Chrome扩展，但是面对如此多的问题，对于一个如此糟糕的规模的项目来说，这有点难以承受

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

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

方法#1 我尝试在当前文档的正文中添加一个简单的不透明的

div

，位置为：fixed，

z-index:2147483647和100%时的宽度/高度。这是可行的，但是：


页面的CSS不断干扰my
div
中的元素
Flash内容偶尔会出现在上面（至少在Windows XP上）。
将
嵌入到整个页面，并将
wmode
设置为
“透明”没有帮助，偏移到-10000px或设置
显示：无只是缓解了问题，但没有解决问题。另见


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


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

所以。。。我的方法哪里错了？我不知道还有第三个还是第四个

我很感激，但并不需要代码作为答案。一个暗示或是一个正确的方向也一样好

另外，我想在某个时候，有人会问我是否有代码可以共享。我知道，但是有很多。您特别希望看到哪一部分？
方法2
关注点#1
显然无法访问iframe的内容，因为
跨原产地政策。以及访问权限–我需要它来分配处理程序
对于用户正在键入答案的输入字段，我需要
还记得是谁从我的答案输入字段中窃取焦点来给出答案吗
问题一回答，它就回来了，等等

是的，您可以访问iframe的内容，无论是网页的所有代码，还是CSP等

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

示例实现
manifest.json
anotherscript.js
如果您观察控制台记录的消息，您将观察两次记录的消息（
document
log+
iframe
log+
[页面中任意数量的可选iframe]*
）

anotherscript.js
在
document idle
状态下运行，它在动态生成的iframe中执行，无论您何时都可以重新运行内容脚本

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

你想达到什么目的？
完全忘记了这个问题。。。最后，我采用了方法2，使用消息传递与iframe进行通信，效果非常好。以下是对代码感兴趣的人的延期回购协议：
核方案如何？使用内容脚本清除被调用页面的整个DOM。然后用您自己的代码替换DOM。一旦问题得到回答，将用户重定向到目标（但这次不要炸毁目标）。@Tsherman先生我曾想到从轨道发射核弹的解决方案，但这可能会导致在互联网上购买东西时产生可怕的放射性沉降物。你知道，在线支付系统不应该真正点击“后退”按钮。好吧，
iframelement.src
确实是一个公开的读/写属性。但是，尝试在该iframe上调用
getElementById
，以获取iframe中的某个元素，您将得到一个“不安全的JavaScript尝试访问帧…”错误。此外，我确实理解消息传递的意义，但我宁愿将其作为最后手段使用。您可以通过不访问
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>"
    ]
}

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

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