[Chrome拡張]　オプションページを表示する方法

オプションページの表示方法をご紹介します。
#### オプションページとは？
Chrome拡張を使用する上でユーザーの設定情報おきたい時に使用するページのことです。

この記事では取り上げませんが「chrome.storage」を使用して
ユーザー情報の保存を目的とします。
[[Chrome拡張]　ストレージ(chrome.storage.local)を利用する方法](https://qiita.com/doran/items/38a89bcaf4b89c758725)

オプションページをjs内で呼び出したい場合は以下を使用します。
***chrome.runtime.openOptionsPage();***

#### どうやってオプションページを表示するの？
表示する方法を2つ紹介します。

1.　拡張機能の詳細から表示する方法
「拡張機能を管理」で対象の拡張機能の「詳細」ボタンを押します。
<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/9683abbc-839c-ada7-9141-9e42cb0877d7.png">
その拡張の詳細情報が表示されるので、「拡張機能のオプション」を押します。
<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/f2b6090b-6b29-e56e-2d75-800a93d205ab.png">
2.　Chrome拡張アイコンを右クリックする方法
拡張アイコンを右クリックするとメニューが開かれるので、「オプション」を押します。
<img width="240" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/91a28704-c12f-c1a5-056d-98d6b6d11c2f.png">

:::note info
新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として共有できればと思い、記事を書いています。
[ちなみに、こちらがそのChrome拡張の記事です](https://qiita.com/doran/items/8c3ca80de3f149dce0e0)

[こちらは別のChrome拡張の記事です。合わせてどうぞ](https://qiita.com/doran/items/6613ea2d92b330bae2c9)
:::

#### 用意するファイル
オプションページを表示するだけなのでシンプルです。
```
root/
 　├ manifest.json
 　├ option.html
 　└ images/
     　└ icon.png
```
### option.html
シンプルなオプションページです。
```html
<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>オプションページテスト</title>
  </head>
  <body>
    オプションページです。
  </body>
</html>
```
#### manifest.json
***options_page***に、表示するオプションページを指定します。
permissionsは不要です。
```json
{
  "name": "オプションページテスト",
  "version": "1.00",
  "description": "オプションページテスト",
  "permissions": [],
  "options_page": "option.html",
  "action": {
    "default_icon": {
      "16": "images/icon.png"
    }
  },
  "icons": {
    "48": "images/icon.png"
  },
  "manifest_version": 3
}
```
#### 実行結果
1.オプションページを表示してみると。。。表示された。
<img width="320" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114621/a9d475b6-0402-6225-2425-832ae2b65ba2.png">
おしまい。。

#### その他のChrome拡張の実装方法
以下はこれまでに投稿したChrome拡張の記事です。用途に応じてご覧ください。
[[Chrome拡張]　ツールバーのアイコンをクリックしてHTMLページを表示する方法](https://qiita.com/doran/items/743f687eb413c41432e1)
[[Chrome拡張]　Chrome拡張メニューからページを操作する方法](https://qiita.com/doran/items/9203789b570632e2456e)
[[Chrome拡張]　Webページ(content scripts)からChrome拡張画面へメッセージを送る方法](https://qiita.com/doran/items/faf21f816b168606cfbe)
[[Chrome拡張]　Chrome拡張画面でタイマー(定期実行処理)を使用する方法](https://qiita.com/doran/items/c2c5c225691fd423b2e6)
[[Chrome拡張]　Content Scriptsでタイマー(定期実行処理)を使用する方法](https://qiita.com/doran/items/2620b2c8f2ac2c5548b6)
[[Chrome拡張]　Chrome拡張メニューからWebページを操作する方法](https://qiita.com/doran/items/8045701ba688f50d6295)
[[Chrome拡張]　Chrome拡張メニューからWebページを操作する方法(jQueryを使う)](https://qiita.com/doran/items/817432932bf77c781002)
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法](https://qiita.com/doran/items/7ccf10bb310ab46478d4)
[[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法(Content Scriptsを使う)](https://qiita.com/doran/items/e69ba19cbd2f5049bc97)
[[Chrome拡張]　Chrome拡張メニューから開いていないWebページの情報を取得する方法](https://qiita.com/doran/items/c2d3249c53b97ddeed0d)
[[Chrome拡張]　ポップアップメニューを表示する方法](https://qiita.com/doran/items/6684c939c5dc2b9d091a)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法](https://qiita.com/doran/items/c34be1c03353a02cd04f)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法(jQueryを使う)](https://qiita.com/doran/items/6b7181e369cd1be7dfc4)
[[Chrome拡張]　ポップアップメニューからWebページを操作する方法(スタイル変更)](https://qiita.com/doran/items/00ea4f88862031811ed4)
[[Chrome拡張]　ストレージ(chrome.storage.local)を利用する方法](https://qiita.com/doran/items/38a89bcaf4b89c758725)