chrome.tabs.update（）重定向到'chrome-extension：// invalid /' [英] chrome.tabs.update() redirects to 'chrome-extension://invalid/'

查看：1944
本文介绍了chrome.tabs.update（）重定向到'chrome-extension：// invalid /'的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我写了一个chrome扩展，它根据作为内容脚本注入的计时器的值重定向当前选项卡。后台脚本通过每隔一段时间轮询每个计时器来跟踪所有打开的选项卡上的已用时间，并且如果花费在特定站点上的时间超过了给定的限制，则将活动选项卡重定向到插页式页面，并且可以选择重置定时器并恢复以前的URL。这是有效的，但是一旦定时器重置一次， chrome.tabs.update（）会将活动标签重定向到 chrome-extension：// invalid / 。我不知道为什么，甚至不知道如何诊断这里发生了什么。

这是它应该如何工作的，一步一步的。首先，当时间到时，后台脚本中的块会被触发：



background.js：

  if（time_elapsed> time_limit）{
 settings.restore_url = tab.url; 
 var timeup_url = chrome.extension.getURL（'timeup.html'）; 
 update_icon（off）; 
 chrome.tabs.update（{url：timeup_url}）; 
}

这会将当前标签的网址保存为设置对象，从扩展目录获取静态页面 timeup.html 的URL，更新工具栏图标，并将当前选项卡重定向到 timeup.html 。



timeup.html：

 <！DOCTYPE html> 
< html> 
< head> 
< link rel =stylesheethref =bootstrap.csstype =text / css> 
< style> 
 .hero-unit {
 background-color：#ffffff; 
 text-align：center; 
} 
 .icon {
 vertical-align：middle; 
} 
 .xlarge {
 font-size：20px; 
} 
< / style> 
< script src =timeup.jstype =text / javascript>< / script> 
< title> Tabminder< / title> 
< / head> 
< body> 
< div class =container> 
< div class =row-responsive> 
< div class =hero-unit> 
< h1>不要分心！< / h1> 
< p>您一直在浏览一个时间片网站太久。< / p> 
< p> 
< a class =btn btn-inverse btn-large xlargeid =close-tabs>< img src =img / remove.png> 
< span class =icon>关闭标签< / span> 
< / a> 
< a class =btn btn-danger btn-large xlargeid =restart-timer>< img src =img / repeat.png> 
< span class =icon>重启计时器< / span> 
< / a> 
< / p> 
< / div> 
< / div> 
< / div> 
< / body> 
< / html>

这很简单。两个按钮连接到'点击'事件监听器在...



timeup.js：

  document.addEventListener（'DOMContentLoaded'，function（）{
 document.getElementById（close-tabs）。addEventListener （'click'，close_tabs）; 
 document.getElementById（restart-timer）。addEventListener（'click'，restart_timer）; 
}）; 
 
 var port = chrome.extension.connect（）; 
 
函数close_tabs（）{
 port.postMessage（{close_tabs：true}）; 
 
 
函数restart_timer（）{
 port.postMessage（{restart_timer：true}）;

＃restart-timer 按钮调用 restart_timer（），它将消息发送回内容脚本以重定向选项卡：

background.js：

  //监听来自内容脚本的连接
 chrome.extension.onConnect.addListener（function（端口）{
 port.onMessage.addListener（函数（msg）{
 if（msg.name ==update）{
 update_times（msg.update，port.sender.tab） ; 
} 
 
 //来自timeup页面的消息：
 if（msg.close_tabs === true）{
 chrome.tabs.remove（port.sender。如果（msg.restart_timer === true）{
 var reset_hostname = get_location（settings.restore_url）.hostname; 
 settings（
）
 
 .elapsed_times [reset_hostname] = 0; 
 chrome.tabs.update（{url：settings.restore_url}）; 
} 
}）; 
}）;

这会重置设置中存储的运行时间并将标签重定向到 settings.restore_url 。这是第一次正确的工作，但一旦计时器已被重置，似乎重定向到 chrome-extension：// invalid / 。即使在第一次重置之后， settings.restore_url 的正确值被传递给 chrome.tabs.update（），所以我不确定重定向来自何处。这里有什么问题？如何在将来诊断这类错误？

解决方案

正如@RobW指出的那样，添加需要主机页面的文件访问 web_accessible_resources ：


清单 - Web可访问资源



一个字符串数组，指定打包资源预计在网页上下文中可用。这些路径与包根有关，可能包含通配符。

...



这些资源可通过网址 chrome-extension：// [PACKAGE ID] / [PATH] ，可以使用 extension.getURL 方法生成。列入白名单的资源使用适当的CORS头文件，因此它们可通过像XHR这样的机制获得。



从源网站到扩展资源的导航将被阻止，除非资源被列为网络访问。


（仅限摘录）


I've written a chrome extension that redirects the current tab based on the value of a timer injected as a content script. A background script keeps track of elapsed times across all open tabs by polling each timer every once in a while, and if time spent on a particular site is over a given limit, redirects the active tab to an interstitial page with the option to reset the timer and restore the previous URL. This works, but once the timer has been reset once, chrome.tabs.update() redirects the active tab to chrome-extension://invalid/. I'm not sure why, or even how to diagnose what's going on here.

Here's how it's supposed to work, step by step. First, an if block in the background script is triggered when time's up:

background.js:

if (time_elapsed > time_limit) {
                settings.restore_url = tab.url;
                var timeup_url = chrome.extension.getURL('timeup.html');
                update_icon("off");
                chrome.tabs.update({url: timeup_url});
}

This saves the current tab's url to a settings object, gets the URL of the static page timeup.html from the extension directory, updates the toolbar icon, and redirects the current tab to timeup.html.

timeup.html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.css" type="text/css">
<style>
.hero-unit {
  background-color: #ffffff;
  text-align: center;
}
.icon {
  vertical-align: middle;
}
.xlarge {
  font-size: 20px;
}
</style>
<script src="timeup.js" type="text/javascript"></script>
<title>Tabminder</title>
</head>
<body>
    <div class="container">
        <div class="row-responsive">
            <div class="hero-unit">
                <h1>Don't get distracted!</h1>
                    <p>You've been browsing a timesink site for too long.</p>
                    <p>
                        <a class="btn btn-inverse btn-large xlarge" id="close-tabs"><img src="img/remove.png">
                            <span class="icon"> Close tab</span>
                        </a>
                        <a class="btn btn-danger btn-large xlarge" id="restart-timer"><img src="img/repeat.png">
                            <span class="icon"> Restart timer</span>
                        </a>
                    </p>
            </div>
        </div>
    </div>
</body>
</html>

This is pretty simple. Two buttons that are hooked up to 'click' event listeners in...

timeup.js:

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("close-tabs").addEventListener('click', close_tabs);
    document.getElementById("restart-timer").addEventListener('click', restart_timer);
});

var port = chrome.extension.connect();

function close_tabs () {
    port.postMessage({close_tabs: true});
}

function restart_timer () {
    port.postMessage({restart_timer: true});
}

The #restart-timer button calls restart_timer(), which sends a message back to the content script to redirect the tab:

background.js:

// Listen for connections from content scripts
chrome.extension.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(msg) {
        if (msg.name == "update") {
            update_times(msg.update, port.sender.tab);
        }

        // Messages from timeup page:
        if (msg.close_tabs === true) {
            chrome.tabs.remove(port.sender.tab.id);
        }

        if (msg.restart_timer === true) {
            var reset_hostname = get_location(settings.restore_url).hostname;
            settings.elapsed_times[reset_hostname] = 0;
            chrome.tabs.update({url: settings.restore_url});
        }
    });
});

This should reset the elapsed time stored in settings and redirect the tab to settings.restore_url. This works correctly the first time through, but once the timer has been reset, seems to redirect to chrome-extension://invalid/. Even after the first reset, the correct value of settings.restore_url is passed to chrome.tabs.update(), so I'm not sure where the redirect is coming from. What's going wrong here? How can I diagnose this sort of error in the future?

解决方案

As @RobW pointed out, add files you need the host page to access to web_accessible_resources:

Manifest - Web Accessible Resources

An array of strings specifying the paths of packaged resources that are expected to be usable in the context of a web page. These paths are relative to the package root, and may contain wildcards.

...

These resources would then be available in a webpage via the URL chrome-extension://[PACKAGE ID]/[PATH], which can be generated with the extension.getURL method. Whitelisted resources are served with appropriate CORS headers, so they're available via mechanisms like XHR.

A navigation from a web origin to an extension resource will be blocked unless the resource is listed as web accessible.

(excerpt only)

这篇关于chrome.tabs.update（）重定向到'chrome-extension：// invalid /'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆