More than 3 years have passed since last update.

つくってみよう - FireFox拡張機能でブックマークを一覧表示する（１）公式サンプルを体験する

Last updated at 2021-01-04Posted at 2020-12-01

つくってみよう - FireFox拡張機能でブックマークを一覧表示する記事一覧

つくってみよう - FireFox拡張機能でブックマークを一覧表示する（１）公式サンプルを体験する
 つくってみよう - FireFox拡張機能でブックマークを一覧表示する（２）動作を確認する
[つくってみよう - 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)

ひっそりアドベンド２０２０

Qiita Advent Calendar 2020が盛り上がる中ちょっと敷居が高いけどアドベンドには参加したい。
そこで個人で楽しむFireFoxの拡張機能を”ひっそりと”つくっていきたいと思います。
今回は個人的に欲しいと思っていたブックマークを一覧表示する機能を実装していきます。

開発環境について

今回はWindows10（OS）、FireFox（ブラウザー）、VisualStudioCode（エディター）で開発します。
FireFox以外はこれでなければ動かないということはないと思いますので適宜選んでください。今回はエディターはメモで十分です。よくわからない場合は上の環境だと解説どおりで動作します。

FireFox拡張機能について

FireFoxの準備

FireFox拡張機能を利用するにはFireFoxが必要です。開発環境にない場合はインストールしてください。
　参考リンク：Firefox の最新版を入手

拡張機能について

拡張機能についてMDNでは以下のように[説明][link-1]しています。
[link-1]:https://developer.mozilla.org/ja/docs/Mozilla/Add-ons

開発者はアドオン (add-on) を作成して Firefox を拡張したり機能を変更したりできます。アドオンは JavaScript、HTML、CSS といったWeb標準技術と、幾つかの専用JavaScript APIを使って作成します。アドオンは、主に以下のようなことを実現できます。

特定のウェブサイトの見た目や内容を変更する

Firefoxのユーザーインタフェースを変更する

Firefoxに新しい機能を追加する

アドオンには幾つかの種類がありますが、もっとも一般的なのは拡張機能 (extension)です。

MDN Web Docsではウェブ技術のドキュメントが豊富に公開されています。リファレンスやサンプルを参考にしながら拡張機能をつくることができます。
　参考リンク：Mozilla
　参考リンク：ブラウザー拡張機能

まずは動かしてみましょう

MDN Web Docsの「[初めての拡張機能][link-2]」を参考に拡張機能をつくってみましょう。
[link-2]:https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

ディレクトリ（フォルダー）をつくる

「borderify」という名前でフォルダーをつくります。

manifest.jsonを配置する

borderifyの中に「manifest.json」という名前で空のファイルをつくります。

manifest.jsonを編集する

manifest.jsonに以下の内容をコピー＆ペーストして保存します。

manifest.json

{
  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",
 
  "description": "Adds a solid red border to all webpages matching mozilla.org.",
  
  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]
}

manifest.jsonの各キーについては[manifest.json][link-3]に解説がありますので目を通すことをお勧めします。
[link-3]:https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json

アイコンを設定する

borderifyの中に「icons」という名前でフォルダーをつくります。
manifest.jsonの"icons"で指定している画像ファイルをmdn/webextensions-examplesからダウンロードして配置します。

manifest.json（一部）

    "icons": {
      "48": "icons/border-48.png"
    },

borderify.jsを配置する

borderifyの中に「borderify.js」という名前で空のファイルをつくります。

borderify.jsを編集する

borderify.jsに以下の内容をコピー＆ペーストして保存します。

borderify.js

document.body.style.border = "5px solid red";

動かしてみよう

インストール

[インストール][link-5]を参考に"一時的なアドオンを読み込む"でインストールします。
[link-5]:https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#Installing

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

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

インストールが完了すると一覧に指定したアイコンのついた「Borderify」という名前のアドオンが表示されます。

テストしてみよう

manifest.jsonで指定した"://.mozilla.org/*"を含むサイトにアクセスすると赤い枠線が表示されます。