Chrome拡張開発でポップアップから設定ページに遷移する方法

はじめに

最近、個人開発しているChrome拡張のTabTabTabで設定ページを作成することがあった。

設定ページとは拡張アイコンを右クリックしたときに表示されるリストの中の「Options」から遷移できる拡張の設定ページのことだ。

この記事では、例えばポップアップ内の設定アイコンをタップした際に設定ページに遷移できるようにする方法を紹介する。

方法

最初、自分は以下の対応で遷移を実現していた。

window.open(`chrome-extension://${拡張のID}/options.html`)

しかし、開発時の動作確認ではうまく動いていたのにリリースした後に確認するとエラーが出て遷移できなかった。

理由としては設定していた拡張のIDの部分に開発用の拡張のIDを指定してしまっており、ストアに公開されている拡張のIDとは違っていたためだった。

拡張のIDの部分に公開されている拡張のIDを指定すれば正常に動作するが、それでは開発時とリリース時で毎度IDを差し替える必要があって面倒だ。調べていると以下のAPIを見つけた。

chrome.runtime.openOptionsPage()

chrome.runtime  |  API  |  Chrome for Developers

説明

developer.chrome.com

これは開発時とリリース時で特にIDを指定する必要がなく、期待通りの動作をしてくれた。

おわり

今回はwindow.openで実現できると思ってAPIドキュメントで同様の機能を探すことをしなかったためエラーを出してしまった。

Chrome拡張のAPIはたくさんあるため、「こんな機能を実装したい」というのがあれば自力でやる前にまずはドキュメントを探すようにしたい。