つくってみよう - 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情報の取得について]
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（７）ソースコードを読む - 表示について①]
(https://qiita.com/madaaamj/items/d9e7b1c296221218d46a)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（８）ソースコードを読む - 表示について②]
(https://qiita.com/madaaamj/items/a7e3f764f8177139bf7d)

ソースコードを読む

「FireFox拡張機能でブックマークを一覧表示する」機能をつくっていきましょう。
今回はブックマーク拡張機能「ExBmSearch」の構成を見ていきます。書き方のサンプルとして参考にしてもらえるように詳しく解説していきます。

構成について

「ExBmSearch」は以下のファイル群で構成されています。

フォルダー	フォルダー	ファイル	説明
ex_bm_search	-	manifest.json	設定
	background_scripts	background.js	スクリプト
	content_scripts	bmlist.html	HTML
		bmlist.css	CSS
		bmlist.js	スクリプト
	icons	ic_book_black_36dp.png	アイコン画像

manifest_json

manifest.jsonは拡張機能の設定ファイルです。ExBmSearchの設定は以下の通りです。

manifest.json

{
  "description": "ExBmSearch('A [Ex]tension for [B]ook[m]ark [Search]' is a extension for a FireFox bookmark with Tags",
  "manifest_version": 2,
  "name": "ExBmSearch",
  "version": "1.0",
  "homepage_url": "https://github.com/madaaamj/webextensions/tree/main/FireFox/ex_bm_search",
  "icons": {
    "48": "icons/ic_book_black_36dp.png"
  },

  "permissions": [
    "activeTab",
    "find"
  ],

  "browser_action": {
    "default_icon": "icons/ic_book_black_36dp.png",
    "theme_icons": [{
        "light": "icons/ic_book_black_36dp.png",
        "dark": "icons/ic_book_black_36dp.png",
        "size": 32
    }],
    "default_title": "ExBmSearch"
  },
  
  "background": {
    "scripts": ["background_scripts/background.js"]
  },

  "content_security_policy": "script-src 'self' https://*.jquery.com https://*.jsdelivr.net https://*.fontawesome.com; object-src 'self'",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_scripts/bmlist.js"]
    }
  ],

  "browser_specific_settings": {
    "gecko": {
      "id": "ExBmSearch@madaaamj.com"
    }
  }
}

"permissions"では拡張機能に必要な権限を指定します。
"activeTab"により拡張機能はアクティブなタブ限定の特別な権限が許可されます。
"find"は"find API"を使うのに必要な権限です。
今回は使用しませんが"ブックマークAPI"を使用する場合は"bookmarks" パーミッションを指定します。

manifest.json（一部）

  "permissions": [
    "activeTab",
    "find"
  ],

"background"では拡張機能にバックグラウンドスクリプトを指定します。

バックグラウンドスクリプトは、特定のウェブページやブラウザーウィンドウとは独立した、長い期間の状態や、長い期間の操作を維持する必要があるコードを置く場所です。

"scripts"でJavaScriptファイルへのパスを指定します。

manifest.json（一部）

  "background": {
    "scripts": ["background_scripts/background.js"]
  },

"content_security_policy"では拡張機能のセキュリティを制御します。以下ではhttps://.jquery.com、https://.jsdelivr.net、https://*.fontawesome.comからのリモートスクリプトを許可しています。

コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。

manifest.json（一部）

"content_security_policy": "script-src 'self' https://*.jquery.com https://*.jsdelivr.net https://*.fontawesome.com; object-src 'self'",

content_scriptsでは与えられたパターンにURLがマッチしているページに指定したコンテンツスクリプトをロードします。

manifest.json（一部）

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_scripts/bmlist.js"]
    }
  ],

[構成についてへもどる]

background_js

manifest.jsonの"background"キーで指定したスクリプトファイルです。
ブラウザーのメニューバーに追加されたExBmSearchのボタンをクリックすると関数showTab()が呼び出されます。この関数が呼び出されると新しいタブを開いて"content_scripts/bmlist.html"をロードします。

background.js

function showTab() {
  var creating = browser.tabs.create({
    url:"content_scripts/bmlist.html"
  });
}

browser.browserAction.onClicked.addListener(showTab);

[構成についてへもどる]

bmlist_html

background.jsの関数showTab()から呼び出されたHTMLファイルです。

HTML (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 HTML はウェブページの基本レイアウトに従ってウェブページのコンテンツを記述し定義するものです。

詳細は次の回で解説します。

[構成についてへもどる]

bmlist_css

bmlist.htmlで使用するスタイルシートです。

カスケーディングスタイルシート (CSS) はスタイルシート言語であり、 HTML や XML (方言である SVG, MathML, XHTML などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。 CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。

主に[トップへ戻る]ボタン（↑ #fab）のスタイルについて記述しています。

bmlist.css

/* general styles */
body {
  width: 800px;
  margin: 0 auto;
}

/* Font Awesome*/
.fa-ul {
  margin-left: 0px;
}

/* フローティングボタン */
# fab{
  display: none;
  width: 50px;
  height: 50px;
  position: fixed;
  right: 35px;
  bottom: 35px;
  background: #ffc107;
  border-radius: 10%;
}
# fab a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
# fab a:hover {
  opacity: 0.5;
}
# fab a::before{
  /* Font Awesome*/
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f139';

  bottom: 0;
  right: 0;
  left: 0;
  font-size: 25px;
  color: black;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -10px;
  margin: auto;
  text-align: center;
}

[構成についてへもどる]

bmlist_js

bmlist.htmlで使用するスクリプトファイルです。

ExBmSearchの機能のコアになるファイルです。
詳細は次の回以降で解説します。

[構成についてへもどる]

ic_book_black_36dp_png

ExBmSearchのアイコンです。インストール時の画面やメニューバーに使用されます。manifest.jsonで指定します。このアイコンファイルは"LICENSE"で記載したように"Material Design"のものを利用しています。

manifest.json（一部）

"browser_action": {
    "default_icon": "icons/ic_book_black_36dp.png",
    "theme_icons": [{
        "light": "icons/ic_book_black_36dp.png",
        "dark": "icons/ic_book_black_36dp.png",
        "size": 32
    }],
    "default_title": "ExBmSearch"
  },

[構成についてへもどる]