从 Chrome 扩展程序访问 iframe URL答案

【问题标题】：Access iframe URL from Chrome extension从 Chrome 扩展程序访问 iframe URL
【发布时间】：2013-03-15 17:13:56
【问题描述】：

我有一个扩展程序需要在其背景页面中加载一个包含大量重定向的页面。一旦该页面到达已知 URL (https://website.com/index.php)，iframe 应该将其 src 设置为 about:blank。

最后一页很大，有大图和所有不需要加载的东西，所以我没有附加到 iframe 的 onload 事件，而是以 100 毫秒的间隔设置以下函数：

function update(){
    if(document.getElementsByTagName('iframe')[0].contentDocument.location.href == "https://website.com/index.php"){
        console.log("Done!");
        clearInterval(updateInterval);
        document.getElementsByTagName('iframe')[0].src = "about:blank";
    }
}

然而，一旦 iframe 开始加载，update() 就会抛出这个错误：

不安全的 JavaScript 尝试使用 URL 访问框架 https://website.com/index.php 来自带有 URL 的框架铬扩展：//hdmnoclbamhajcoblymcnloeoedkhfon/background.html。请求访问的框架有一个“chrome-extension”协议，正在访问的帧具有“https”协议。协议必须匹配。

我尝试捕获（）该错误，但毫无疑问，传递回 Javascript 的消息不包含 URL。页面会多次重定向，因此了解确切的 URL 很重要。 iframe 的 src 属性也不会更新以反映重定向。

【问题讨论】：

标签： javascript google-chrome-extension cross-domain

【解决方案1】：

在谷歌搜索很多并几乎放弃之后，我想出了以下解决方案。一旦加载了正确的页面，它就会使用注入的内容脚本将消息发送回扩展程序。

manifest.json：

{
    ...
    "background": {
        "page": "background.html"
    }, "content_scripts": [
        {
            "matches": ["http://website.com/index.php"],
            "js": ["content.js"],
            "all_frames": true,
            "run_at": "document_start"
        }
    ],
    "permissions": [
        "*://*.website.com/*"
    ]
}

背景.html：

<html>
    <head>
        <script type="text/javascript" src="background.js"></script>
    </head>
    <body>
        <iframe src="about:blank"></iframe>
    </body>
</html>

background.js：

var waiting = false;

function login(){ // Call this function to start
    var frame = document.getElementsByTagName('iframe')[0];
    frame.src = "https://website.com/login/";
    waiting = true;
}

function callback(){ // This gets called once the page loads
    console.log("Done!");
}

chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
    if(request.loaded && waiting){
        // If you used a pattern, do extra checks here:
        // if(request.loaded == "https://website.com/index.php")
        document.getElementsByTagName('iframe')[0].src = "about:blank";
        waiting = false;
        callback();
    }
});

content.js：

chrome.extension.sendMessage({loaded: window.location.href});

【讨论】：