雑記
Chrome拡張機能の「メモ帳」を手探りで開発してみました（前編）
はち
更新日:2021/08/12
こんにちは、はちです。
昔はミニアプリを開発する際、”ガジェット”や”デスクトップマスコット”がよく採用されていました。
しかしこの執筆をしている現在は2017年。今の時代だと若干遺産気味になっていますね。
でもミニアプリを作って配布してみたい！という心はいつの時代でも永久不滅だと私は思っています。
さて、ガジェット等々に代わるツールって今の時代だと何かなぁ、とブラウザの右上をふとみたら「Chrome拡張機能」が。ここでピンときました。
”これならミニアプリ程度でも十分だし、配布だってできちゃうな…！”
ということで、Chrome拡張機能を作ることにしました。
お題は簡単なものとして「メモ帳アプリ」にします。
開発手順の前提
ここからはプログラミングの初心者が同じプログラミング初心者にわかる範囲で、「Chrome拡張機能」の開発手順を説明した記事となっています。
background.jsが…制限が…と書くとどうしても簡単ではなくなるので、この記事では思い切って省いています。
あくまで”簡単に最低限“の労力で拡張機能を作る記事としてお楽しみいただければと思います。
Chrome拡張機能のイメージ
Chrome拡張機能と聞いて、どういう風に開発するんだろう…。まさか、デスクトップアプリみたいにC#で作って画面を生成して＃％＆’＄＆＃％…と不安になってしまう方も少なからずいると思います。（私がそうでした）
しかし思い返していただくと、Google Chromeはブラウザです。ブラウザはHTMLとCSSで作られたページを表示する役割を持っています。
実は拡張機能もWebページのようなもので、中身は「HTML」「CSS」「javascript」で出来ています。
構成的にはWebアプリケーションと何ら変わりないですね。
要約するとChrome拡張機能は「ポップアップで表示される小さなWebアプリ」
のような立ち位置になっているんです。
こうやって聞くと簡単そうですね。
Chrome拡張機能の仕様書「manifest.json」を最初に作ろう
まず行うことは、Chromeさんに”この拡張機能はこんな名前で、こんな機能を持ってて、こんなファイルを使います“と教えるための仕様書であり、説明書となる「manifest.json」というファイルを作ります。
まずは適当にフォルダを作って、その中に”manifest.json”という名前のファイルを作りましょう。
一緒に中身に以下のサブフォルダを作っておきます。（フォルダに特に制約はありません、わかりやすくなっていればOKです）
作ったら”manifest.json”をメモ帳や好きなエディタで開きます。
開いたら、以下の項目を順番に追加していってください。
1.”name” … 拡張機能の名前
拡張機能の名前です。Chrome Webストアで拡張機能一覧を表示した時や、インストール済みの拡張機能一覧に出てきます。
名前は日本語OKです。かっこよく英語で書いてもよし、日本語でわかりやすく書いてもOKです。
2.”version” … 拡張機能のバージョン
拡張機能のバージョンです。基本的に自由ですが、もしリリース段階でベータ版的立ち位置なら0.1.0で、完成形であれば1.0.0で良いです。改良していく毎に数字を増やすのを忘れずに。
3.”manifest_version” … manifest.json自体のバージョン
manifest.json自体のバージョンです。2017年現在はバージョン「2」が提供されているので「2」と書いておきましょう。
4.”description” … 拡張機能の説明文
拡張機能がどんな機能を持っているのか、ユーザーに説明する文はここに書きます。
Chromeストアや拡張機能一覧で表示されるので、詳しく書いても1行でまとめてもOKです。
5.”icons” … 拡張機能のアイコン
ストアや一覧に表示されるアイコンたちです。png画像ファイルを用意します。
「16×16px」「48×48px」「128×128px」の画像を用意して、以下のように書いてください。
“16”: “images/icon_16.png”,
“48”: “images/icon_48.png”,
“128”: “images/icon_128.png”
},
6.”browser_action” … ポップアップする画面の指定
ここは「ブラウザの右上に表示されるアイコン」と「クリックした時に表示されるポップアップ画面」を指定するところです。
ここでは3つの項目を指定することになります。
- 右上に表示するアイコン（default_icon）
- アイコンにカーソルを合わせた時に出てくるタイトル名（default_title）
- はじめに表示されるHTMLページ（default_popup）
“default_icon”:{
“16”: “images/icon/icon_16.png”,
“32”: “images/icon/icon_32.png”
},
“default_title”: “インスタントメモ帳”,
“default_popup”: “popup.html”
},
7.”permission” … chrome.API*を指定する場所
Chrome拡張機能を開発するため、Chromeがとても便利な機能を沢山用意してくれています。
いくつか抜粋して説明するとこんな感じのものがあります。
| chrome.alarms | 定期的もしくは指定された時刻に任意のコードを実行・スケジュールできるAPI |
|---|---|
| chrome.bookmarks | Chromeに設置されているブックマーク機能を操作して、ブックマーク作成・整理・削除等が出来る。 このAPIを使ってオリジナルのブックマークマネージャも作れる。 |
| chrome.storage | 拡張機能が持つデータベースにコンテンツを格納するAPI。 「sync（ChromeにログインすればどのPCでも参照可能）」と 「local（PC単位で管理になるが、制約が緩い）」2種類の保存形式がある。 |
今回はメモ帳アプリを想定しているので、メモ帳を保存するために「chrome.storage」を使用します。
“storage”
]
これらを全部合わせたらこんな感じのmanifest.jsonが出来上がります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{ "name": "InstantMemoPad", "version": "0.1.0", "manifest_version": 2, "description": "簡単に使えるシンプルなメモ帳です。", "icons": { "16": "images/icon_16.png", "48": "images/icon_48.png", "128": "images/icon_128.png" }, "browser_action":{ "default_icon":{ "16": "images/icon/icon_16.png", "32": "images/icon/icon_32.png" }, "default_title": "インスタントメモ帳", "default_popup": "popup.html" }, "permissions": [ "storage" ] } |
長くなりましたので、一旦ここで記事を〆たいと思います。
Chrome拡張機能の「メモ帳」を手探りで開発してみました（後編）では実際に中身の作成をササっと作っていきたいと思います。
