Chrome拡張のUnchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーを解決する。。。終点

• 事の発端

Chrome拡張機能を開発している時に、拡張機能が実行されたら開いているページの
URLを取得してそれに対して非同期処理実行する必要がありました。

URLの取得自体は、popup.jsの中にchrome.tabs.queryで取得できるのですが、
非同期処理はbackground.jsに宣言したため
background.jsとpopup.jsで通信する必要がありました。

しかし、popup.jsでchrome.runtime.sendMessageを使って background.jsに送信し、
background.jsでchrome.runtime.onMessage.addListener を使って受信し、
sendResponseで送り返しているはずなのですが、時々
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
というエラーが表示されていました。

• 解決方法

私の場合、マニフェストファイルの以下の部分を
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/background.js"]
}
以下のように変更することで解決できました！
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"run_at":"document_start",
"js": ["js/background.js"]
}


• 追加情報

上記の方法で解決できない場合は以下の方法も試してみてください


・特定のChrome拡張機能をOFFにするとエラーが消える事を検証している動画
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.(YouTube)



・chrome.runtime.onMessage.addListener()のfunctionの中の一番最後にreturn trueを記述していない
Chrome拡張のUnchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーを解決する - nonoNagaInfo



・回答の一例でのsetTimeoutの話を参考にさせてもらった
Chrome Extension message passing: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist - Stack Overflow

• 御礼

初めての投稿ですので私はこの記事を書くにあたって以下の記事を参考にさせて頂きました。
お礼申し上げます。
Chrome拡張のUnchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーを解決する