つくってみよう - FireFox拡張機能でブックマークを一覧表示する（２）動作を確認する

# つくってみよう - FireFox拡張機能でブックマークを一覧表示する 記事一覧
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（１）公式サンプルを体験する](https://qiita.com/madaaamj/items/5bf2ed67a2f68b0aa243)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（２）動作を確認する](https://qiita.com/madaaamj/items/3e33b058ad2f13167084)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（３）ソースコードを読む - 構成について]
(https://qiita.com/madaaamj/items/bef7102722da2f249515)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（４）ソースコードを読む - 画面について]
(https://qiita.com/madaaamj/items/27dd820d10fd20c51dee)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（５）ソースコードを読む - 処理の概要について]
(https://qiita.com/madaaamj/items/af88405b30820b19a114)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（６）ソースコードを読む - JSON情報の取得について]
(https://qiita.com/madaaamj/items/d9e7b1c296221218d46a)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（７）ソースコードを読む - 表示について①]
(https://qiita.com/madaaamj/items/68888b5d0fdb8f2af84f)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（８）ソースコードを読む - 表示について②]
(https://qiita.com/madaaamj/items/a7e3f764f8177139bf7d)

# さっそくはじめましょう
「FireFox拡張機能でブックマークを一覧表示する」機能をつくっていきましょう。
今回からは自作のブックマーク拡張機能「[ExBmSearch](https://github.com/madaaamj/webextensions/tree/main/FireFox/ex_bm_search)」を使って解説していきます。

まずはインストールして動作を確認していきます。

## ダウンロード
GitHibから「[ex_bm_search](https://github.com/madaaamj/webextensions/tree/main/FireFox/ex_bm_search)」を選択してダウンロードします。
「ex_bm_search」フォルダーを任意の場所（どこでもＯＫ）に配置します。

## インストール
FireFoxに拡張機能を追加します。
今回は「["一時的なアドオンを読み込む"](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#Installing "インストール") 」でインストールします。
（注意：「"一時的なアドオンを読み込む" 」でインストールしてFireFoxを再起動すると当拡張機能は無効になります。必要な場合は再度「"一時的なアドオンを読み込む" 」でインストールしてください。）

>Firefox の場合: about:debugging ページを開いて、"この Firefox" (Firefox の新しいバージョンで)をクリックし、"一時的なアドオンを読み込む" をクリックし、アドオンのディレクトリーにあるファイルをどれか 1 つ選択します。

選択するファイルは「manifest.json」です。

インストールが完了すると以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/f3ca6412-b6a1-8b06-f9c4-0dd7180c406b.png)
メニューバーに拡張機能のアイコンが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/6ed0a284-1312-8a50-ee73-420ae117397d.png)

## 拡張機能を使う
拡張機能のアイコンをクリックすると新しいタブが開きます。
[ブックマークファイル選択]をクリックすると[参照…]ボタンが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/9b5deb78-2fc3-ad33-ef39-f5142f4d3303.png)
[参照…]ボタンをクリックしてブックマークファイルを選択します。
あらかじめ[自分の環境のブックマークファイル](https://support.mozilla.org/ja/kb/restore-bookmarks-from-backup-or-move-them#w_butsukumakunobao-cun-tofu-yuan)が用意してあればそちらを選択します。なければダウンロードしたファイルの中に「bookmarks-sample.json」というファイルがあるのでそちらを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/57030a34-c73f-1f9e-a2c2-a316550dc37c.png)
ブックマークの一覧が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/20d44830-e729-6296-136b-a3df0a3b969f.png)

## 機能の説明
### ボタンによるブックマークへのジャンプ
表示される青いボタンをクリックすると該当するブックマークリストまでジャンプします。
青枠はブックマークフォルダー名、青塗りつぶしはタグ名です。[タグはブックマークに紐づけて登録](https://support.mozilla.org/ja/kb/categorizing-bookmarks-make-them-easy-to-find)できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/8bcb4044-59b1-8ede-730c-8a9bbb8549b6.png)
「自然言語処理」フォルダーを選択した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/6561e5e6-e7c9-fb1c-a507-86854a8614b2.png)
「Basic認証」タグを選択した場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/39978bd6-5db2-0d6e-0677-d0838979daaf.png)
画面右下のボタンをクリックすると画面トップに戻ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/fa881eea-5441-4c1f-3931-b215f3687c43.png)

### タグ検索によるブックマークへのジャンプ
タグ検索ボックスに検索したいフォルダー名かタグ名の一部を入力するとオートコンプリート機能で該当するリストがプルダウンされます。
頭に「F-」がつくものはフォルダー名を、ないものはタグ名を表します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/570520c6-4c82-d024-3b19-d31464d684bf.png)

### ワードハイライトによるブックマークへのジャンプ
ワードハイライトボックスに検索したい語句（１文字以上）を入力すると該当する語句がハイライトされ[Enter]キーが押されるたびに移動します。ワードハイライトボックスで[DEL]ボタンを押すと語句が消えてハイライトも消えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/29c8df34-26dd-09e4-93d4-cfdbc9462410.png)
「curl」をワードハイライトした場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277081/55d454b2-7714-7ef4-404e-1e1a889a0908.png)