chrome拡張で、それぞれのタブに対して個別に操作をしたい。

実現したいこと

chrome拡張で、タブを一定秒数リロードし続ける拡張機能を作っています。(実装はedge)
popup.jsからbachground.jsにリロードする秒数やそのタブのid、リロードのスタート/ストップのフラグを送り、background.jsで一定秒数ごとにリロードさせるchrome apiの機能をリロードしたいタブのcontent-sctript.jsに送る形です。
タブごとに個別にリロード、そしてそれをストップさせたいです。

発生している問題・分からないこと

それぞれのタブを個別にリロードさせることはできているのですが、ストップをさせようとすると、現在見ているタブ以外のすべてのリロードがストップしてしまいます。
現在見ているタブのみをリセットさせるようにしたいです。
そして、現在のコードでも複数のタブを個別にリロードすることを実装できているのですが、setIntervalが1つだけなのになぜ実装できたのがも知りたいです。

該当のソースコード

popup.html
1<!DOCTYPE html>
2<html lang="ja">
3  <!--document head and body-->
4    <head>
5        <meta charset="UTF-8">
6        <title>Auto reloader</title>
7        <link rel="stylesheet" href="popup.css">
8        <meta name="viewport" content="width=device-width, initial-scale=1">
9    </head>
10<body>
11<h1>Auto reloader</h1>
12<div class="sec">
13<input id="sec" type="number" placeholder='interval [sec]' min="1" required/>
14</div>
15<button tabindex="0" id="startbotton">Start</botton>
16<button tabindex="0" id="stopbotton">Stop</botton>
17  <script src="popup.js"></script>
18</body>
19</html>

popup.js
1const startbotton = document.getElementById('startbotton');
2startbotton.addEventListener('click', start);
3const stopbotton = document.getElementById('stopbotton');
4stopbotton.addEventListener('click', stop);
5function stop(){
6    chrome.runtime.sendMessage({message : 'stopreload'});
7    chrome.storage.local.clear();
8};
9function start(){
10    const second = document.getElementById("sec");
11    const interval = second.value + '000';
12    chrome.storage.local.set({'time': interval});
13    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) =>{
14        const tab =tabs[0].id;
15        chrome.storage.local.set({'locate': tab});
16    });
17    chrome.runtime.sendMessage({message : 'startreload'});
18};

background.js
1chrome.runtime.onMessage.addListener(function (request) {
2    if (request.message == 'startreload') {
3        chrome.storage.local.get(['time', 'locate']).then((result) => {
4            const timer = result.time;
5            const tab = result.locate;
6            let paused = false
7            const timerID = setInterval(function () {
8                if (paused) {
9                    clearInterval(timerID);
10                    chrome.tabs.sendMessage(tab,{text : "stop"});
11                    return;
12                };
13                chrome.tabs.sendMessage(tab,{text : "loading"});
14                chrome.tabs.reload(tab);
15            }, timer);
16            chrome.runtime.onMessage.addListener(function (request) {
17                if (request.message == 'stopreload') {
18                    paused = true;
19                };
20            });
21        });
22    };
23});

content
1chrome.runtime.onMessage.addListener(function (request) {
2    console.log(request.text);
3});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

setIntervalをタブごとに個別に立てられればと思いましたが、その方法がわかりませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

バックグラウンドスクリプトを次のような感じにします。

javascript
1let intervals = {}
2chrome.runtime.onMessage.addListener(request => {
3    request.type == "start" && start(request.tabId, request.seconds)
4    request.type == "stop" && stop(request.tabId)
5    request.type == "stopAll" && stopAll()
6})
7
8function start(tabId, seconds){
9    intervals[tabId] = setInterval(() => {
10        chrome.tabs.reload(tabId)
11        console.log(`Tab ${tabId} reloaded`)
12    }, seconds*1000)
13}
14
15function stop(tabId){
16    clearInterval(intervals[tabId])
17    delete intervals[tabId]
18}
19
20function stopAll(){
21    Object.values(intervals).forEach(inv => clearInterval(inv))
22    intervals = {}
23}