コンテンツ スクリプトとして挿入されたタイマーの値に基づいて現在のタブをリダイレクトする chrome 拡張機能を作成しました。バックグラウンド スクリプトは、各タイマーを時々ポーリングすることで、開いているすべてのタブの経過時間を追跡し、特定のサイトでの滞在時間が指定された制限を超えている場合は、アクティブなタブをインタースティシャル ページにリダイレクトし、オプションをリセットすることができます。タイマーと以前の URL を復元します。これは機能しますが、タイマーが一度リセットされるとchrome.tabs.update()、アクティブなタブが にリダイレクトされますchrome-extension://invalid/。ここで何が起こっているのか、あるいはどのように診断するのかさえわかりません。
これがどのように機能するはずなのか、ステップバイステップです。まず、if時間切れになると、バックグラウンド スクリプトのブロックがトリガーされます。
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});
}
これにより、現在のタブの 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>
これは非常に簡単です。イベントリスナーに接続されている 2 つのボタン'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()コンテンツ スクリプトにメッセージを送り返し、タブをリダイレクトします。
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});
}
});
});
これにより、 に保存されている経過時間がリセットされsettings、タブが にリダイレクトされますsettings.restore_url。これは最初は正しく機能しますが、タイマーがリセットされると、にリダイレクトされるようchrome-extension://invalid/です。最初のリセット後も、 の正しい値settings.restore_urlが に渡されるchrome.tabs.update()ため、リダイレクトがどこから来ているのかわかりません。ここで何がうまくいかないのですか？今後、この種のエラーをどのように診断できますか?