3

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

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

背景.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});
}

这会将当前选项卡的 url 保存到一个settings对象，从扩展目录中获取静态页面的 URL timeup.html，更新工具栏图标，并将当前选项卡重定向到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>

这很简单。连接到'click'事件侦听器的两个按钮...

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

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

背景.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});
        }
    });
});

这应该重置存储的经过时间settings并将选项卡重定向到settings.restore_url. 这在第一次时可以正常工作，但是一旦计时器被重置，似乎重定向到chrome-extension://invalid/. 即使在第一次重置之后，正确的值settings.restore_url也会传递给chrome.tabs.update()，所以我不确定重定向来自哪里。这里出了什么问题？将来如何诊断此类错误？

4

1 回答 1

1

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

清单 - Web 可访问资源

一个字符串数组，指定预期可在网页上下文中使用的打包资源的路径。这些路径是相对于包根的，并且可能包含通配符。

...

然后，这些资源将通过 URL 在网页中可用chrome-extension://[PACKAGE ID]/[PATH]，可以使用该extension.getURL方法生成。白名单资源使用适当的 CORS 标头提供，因此可通过 XHR 等机制获得。

从 Web 源到扩展资源的导航将被阻止，除非该资源被列为 Web 可访问的。

（仅摘录）

于 2017-10-16T23:29:26.430 回答