つくってみよう - 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)
ソースコードを読む
「FireFox拡張機能でブックマークを一覧表示する」機能をつくっていきましょう。
今回はブックマーク拡張機能「ExBmSearch」の画面を見ていきます。
画面について
「ExBmSearch」の画面は以下のファイル群で構成されています。ここでは「FireFox拡張機能でブックマークを一覧表示する（３）」でふれなかったbmlist.htmlについて解説します。
| フォルダー | フォルダー | ファイル | 説明 |
|---|---|---|---|
| ex_bm_search | content_scripts | bmlist.html | HTML |
| bmlist.css | CSS | ||
| bmlist.js | スクリプト |
bmlist_html
bmlist.htmlはbackground.jsの関数showTab()から呼び出されます。
function showTab() {
var creating = browser.tabs.create({
url:"content_scripts/bmlist.html"
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap ------------------------------>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Bootstrap ------------------------------>
<!-- Font Awesome ------------------------------>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<!-- Font Awesome ------------------------------>
<!-- jQuery ------------------------------>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- jQuery ------------------------------>
<title>ExBmSearch - ブックマーク拡張検索ツール</title>
<link rel="stylesheet" href="bmlist.css">
</head>
<body>
<p>
<button class="btn btn-dark mt-3" type="button" data-toggle="collapse" data-target="#collapseCard" aria-expanded="false" aria-controls="collapseCard">
ブックマークファイル選択
</button>
</p>
<div class="card border-dark mb-4 mt-3 collapse" id="collapseCard">
<div class="card-header">
ブックマークファイル
</div>
<div class="card-body">
<form>
<div class="form-group mb-2">
<label for="selectFile">ブックマークファイルを選択してください。</label>
<input type="file" class="form-control-file mx-3" id="selectFile" aria-describedby="selectFileBlock">
</div>
</form>
<small id="selectFileBlock" class="form-text text-muted">
<p class="mb-0"><i class="fas fa-bell mx-2"></i>[ブックマークファイル選択]をクリックするとブックマークファイル選択の表示／非表示が切り替わります。</p>
<p class="mb-0"><i class="fas fa-bell mx-2"></i>ブックマークファイルの作り方は<a href="https://support.mozilla.org/ja/kb/restore-bookmarks-from-backup-or-move-them" target="_blank" rel="noreferrer noopener">こちら</a>を参照。</p>
<p class="mb-0"><i class="fas fa-bell mx-2"></i>ブックマークにタグを設定する方法は<a href="https://support.mozilla.org/ja/kb/categorizing-bookmarks-make-them-easy-to-find" target="_blank" rel="noreferrer noopener">こちら</a>を参照。</p>
</small>
</div>
</div>
<header>
</header>
<section>
</section>
<script type="text/javascript" src="bmlist.js"></script>
<div id="fab"><a href="#"></a></div>
</body>
</html>
<head>ではCSSファイル名、スクリプトファイル名、利用する外部サービス（Bootstrap、Font Awesome、jQuery）などを指定します。<body>では画面に表示する項目を指定します。
Bootstrapは、例えば
<button type="button" class="btn btn-primary">Primary</button>
と記述すると
このようなボタンを表示できます。
Font Awesomeも同じように
<i class="fas fa-camera"></i>
と記述すると
このような画像を表示できます。
どちらも"class=対応する名前"を指定することで提供される機能や画像を利用することができます。
以下では「ブックマークファイル選択」機能を記述しています。デザインはBootstrapとFont Awesomeを利用しています。（Cards、bellなど）
<p>
<button class="btn btn-dark mt-3" type="button" data-toggle="collapse" data-target="#collapseCard" aria-expanded="false" aria-controls="collapseCard">
ブックマークファイル選択
</button>
</p>
<div class="card border-dark mb-4 mt-3 collapse" id="collapseCard">
<div class="card-header">
ブックマークファイル
</div>
<div class="card-body">
<form>
<div class="form-group mb-2">
<label for="selectFile">ブックマークファイルを選択してください。</label>
<input type="file" class="form-control-file mx-3" id="selectFile" aria-describedby="selectFileBlock">
</div>
</form>
<small id="selectFileBlock" class="form-text text-muted">
<p class="mb-0"><i class="fas fa-bell mx-2"></i>[ブックマークファイル選択]をクリックするとブックマークファイル選択の表示／非表示が切り替わります。</p>
<p class="mb-0"><i class="fas fa-bell mx-2"></i>ブックマークファイルの作り方は<a href="https://support.mozilla.org/ja/kb/restore-bookmarks-from-backup-or-move-them" target="_blank" rel="noreferrer noopener">こちら</a>を参照。</p>
<p class="mb-0"><i class="fas fa-bell mx-2"></i>ブックマークにタグを設定する方法は<a href="https://support.mozilla.org/ja/kb/categorizing-bookmarks-make-them-easy-to-find" target="_blank" rel="noreferrer noopener">こちら</a>を参照。</p>
</small>
</div>
</div>
<header>と<section>はbmlist.js（スクリプトファイル）から動的にHTMLが挿入されます。
<header>
</header>
<section>
</section>
以下ではスクリプトファイルの指定と[トップへ戻る]ボタンについて記述しています。[トップへ戻る]ボタンはbmlist.cssでデザインを、bmlist.jsで動作を記述しています。
<script type="text/javascript" src="bmlist.js"></script>
<div id="fab"><a href="#"></a></div>
[画面についてへもどる]