【chrome extension】backgroundとcontentのメッセージのやり取りが分からない

Question

質問内容

JSでGoogle拡張機能v3ポモドーロタイマーを作成しています。
chrome.tabs.sendMessageやchrome.runtime.onMessage周辺が分からず、アラームを鳴らせない。

【現状】
popup画面にて、タイマーが正常に稼働し、
時間になればアラームが鳴るようになっています。

ただ全てpopup.html / popup.jsにて行なっているので
当然画面を閉じると処理は止まっている状態です。

実現したいこと

popupの画面を閉じていても、アラームが鳴るようにしたい。

しかしv３では、backgroundにて音声が再生できないとの記事を見つけました。

【試そうとしたこと】
bgにて音声ファイルを取得し、content.jsにて再生。

該当のソースコード

let audio = chrome.runtime.getURL('src/mp3/audio.mp3');

//結果を格納する配列を宣言
let array = [];

//ブラウザのタブを取得
chrome.tabs.query({lastFocusedWindow: true},function(tabs){
    //取得したタブ数分を繰り返し
    for(let i=0; i<tabs.length; i++){
        let output = tabs[i].url; //urlを取得
        array.push(output);
    }
    console.log(array) //各開いてるタブのリンクを取得成功
    chrome.tabs.sendMessage(array,({audio: `${audio}`}, function(response){
        response;
    }))
});

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
        request.audio.play();
        return true;
    }
);

発生している問題・エラーメッセージ

公式にて利用法を参照しましたが、それでも使い方が理解できていないのでご助力をお願いします。

Error handling response: TypeError: Error in invocation of tabs.sendMessage(integer tabId, any message, optional object options, optional function callback): No matching signature.

Answer 1

エラーメッセージの通り sendMessage() の第一引数はタブIDです。質問文のコードでは URL の配列を渡しているので動くわけがありません。

for (let tab of tabs) {
  chrome.tabs.sendMessage(tab.id, ...

という感じになるはずです。

Comments

[退会済みユーザー]

ご回答ありがとうございます！
ご指摘いただいた通り``id``にしましたが、同様のエラーが出ました。
見たところ``tabId``、``message``、``function``は揃っているように感じます。なぜでしょうか？
```background.js
let audio = chrome.runtime.getURL('src/mp3/audio.mp3');

chrome.tabs.query({active: true, currentWindow: true },function(tab){
chrome.tabs.sendMessage(tab.id, {audio: `${audio}`}, function(response){
if (response) {
alert(response);
}
})
})
```

```content.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
request.audio
return true;
}
);
```

[int32_t]

回答にわざわざ「for (let tab of tabs) {」と書いてあるんですから、それを無視しては駄目です。
for なしで書くなら、tab.id を tab[0].id にすればいいでしょう。query の結果が配列なので。