我有一个扩展,需要在其背景页面加载大量重定向的页面。一旦页面到达一个已知的URL (https://website.com/index.php), iframe应该将其src
设置为about:blank
。
最后的页面是相当大的,有大的图像和一切不需要加载,所以,而不是附加到iframe的onload
事件,我设置以下函数在100ms的间隔:
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从框架与URLchrome扩展://hdmnoclbamhajcoblymcnloeoedkhfon/background.html。请求访问的帧具有"chrome-extension"协议,即被访问的帧具有"https"协议。协议必须匹配。
我试过catch()处理这个错误,但是传递回Javascript的消息不包括URL。页面重定向多次,所以知道确切的URL很重要。iframe的src
属性也不会更新以反映重定向。
在搜索了很多几乎要放弃之后,我想到了下面的解决方案。它使用注入的内容脚本,一旦正确的页面加载后,就会向扩展发送消息。
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/*"
]
}
background.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});