Chrome拡張の作成時にしょうもないミスで時間を溶かした

はじめに

掲題の通り、Chrome拡張をつくっていたらしょうもないミスで時間を溶かしてしまったので自戒の念を込めて残しておきます。

作ろうとしていたのはPopup.html上のボタンクリックをトリガーにcontent_scriptsにメッセージを送り、content_scriptsで表示しているタブのDOMを操作するという拡張です。

なお、TypescriptおよびReactの練習もかねていました。
参考になるドキュメントもあったのでサクッと作れるはずだったんですが、
あるエラーが発生しました。

Could not establish connection. Receiving end does not exist

どうもcontent_scriptsとpopup画面で通信がうまくいっていない模様。
ググってみるとメッセージをハンドルする関数でtrueを返す必要がある、とか
拡張機能を再読み込みした後にぺージのリロードをする必要がある、とか
ほかの拡張機能が原因の可能性があるので拡張機能をOFFにしてみる、とか
記事がでてきました。

先人がすでに踏み抜いて解決方法もたくさん出てくるみたいだし、何てことないだろう。
と思って記事を参考に悪戦苦闘していたらあっという間に時間を溶かしていました...

出てくる記事の解決法はすべて試したはずなのになぜ...
途方に暮れながら1から自分の書いたコードを隅々眺めているとあることに気が付きました。

んん？manifest.jsonのmatchesおかしくね？？

  "content_scripts": [
    {
      "matches": [
        "https://*//*",
        "http://*//*"
      ],
      "js": [
        "content_script.js"
      ]
    }
  ]

そう、なにをどう間違ったのかmatchesのURLのパスの区切りが/ではなく//になっていたのです！

以上、しょうもない書き間違いで時間を溶かしてしまった話でした。

参考