😇

Chrome Extensionのmessage passingにおけるUnchecked runtime.lastErrorへの対処

2021/10/07に公開

Chrome拡張

JavaScript

tech

Chrome Extensionを自作しており、content scriptでDOM操作をしようとしたところ次のようなエラーに当たった。

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

ネットを見る限りいろんなケースがあったが先に結論を言っておくと私の場合は今いるページの再ロードをしていなかったことが原因だった。

シチュエーション

content scriptでDOMを操作して、metaタグのog:imageを取得してpopup scriptに送り、変数ogpImageUrlに入れようとしていた。

chrome.tabs.query(queryOptions, (tabs) => {
    const currentTab = tabs[0];
    var port = chrome.tabs.connect(tabs[0].id);
    port.postMessage({ msg: "GET_OGP" });
    port.onMessage.addListener(function getResp(response) {
      ogpImageURL = response;
    });
  });

chrome.runtime.onConnect.addListener(function (port) {
  port.onMessage.addListener(function (msg) {
    const ogpImage = document
      .querySelector('meta[property="og:image"]')
      .getAttribute("content");
    port.postMessage(ogpImage);
  });
});

なんの変哲もないcontent script -> popup scriptへのmessage passingです。
が、実際に拡張のページからビルドファイルをロードして使ってみたところ

エラーが出ました。

試したこと

色々ググりまくって以下のことを行いましたが、どれをやっても治りませんでした。

他のChrome拡張が悪さをしている可能性があるため、全てオフにする
デベロッパーモードの拡張機能欄の更新を押す
manifest.jsonの記述が間違っているので直す。
chrome.runtime.onConnect.addListener()のfunctionの中の一番最後に
return trueを記述する。

結果

偶然気がついたのですが、拡張を試すために開いていたページを一切ロードしていなかったことに気づき、再ロードしたら治りました。
しょーもないところでハマってしまった。。。。。

↑押そう！！

また、content scriptを試す時にはデバックのため

document.body.style.backgroundColor = "red";

とか仕込んどきましょう。ひとめで動いているかわかるので。。。。

シチュエーション

試したこと

結果

Discussion