Chromeの拡張機能を自作してみました。

その名も「atoyomi」。
簡易的な「あとで読む」機能を追加する拡張機能です。

作った経緯や開発で得たポイントなどをメモしておこうと思います。

atoyomiについて

atoyomiは、シンプルに「現在開いているページの情報をブラウザに保存しておく = あとで読むことができる」Chromeの拡張機能です。

cover

  • 現在開いているページのタイトルとURLを保存
  • 保存されているページへ再度アクセスした際に自動的にデータを削除
  • ユーザー登録不要ですぐに利用できる
  • Twitterでシェアできるボタン付き

現在、Chromeストアにて配信されていますので、もし興味があればぜひ使ってみてください！

https://chrome.google.com/webstore/detail//bijbpdfpldnfnponpjmnhmmhgildmgga?hl=ja

なぜ作ったか

僕はよく休憩中や終業後にブログやメディアの投稿をチェックするのですが、読んでいる途中に急な対応が入ってくることがあり、中途半端に読んだままページを閉じてしまってそれっきりということが多々ありました。

そういった場合の一時的な対策として、「Pocketに保存する」や「Twitterに投稿しておいてあとで読む」といったブックマークサービスを利用し、とりあえずどこかに「あとで読む予定のページ情報」を退避させるようにしていました。

ただ、PocketやTwitterだとログインが面倒だったり、いちいちサービスのページへ遷移するのが面倒だったり、情報が埋もれてしまいがちだったので、もっとシンプルに管理できないかなーと考えていたところ、「ブラウザ単体で必要最低限の情報だけ表示・管理できるようにすれば良いのでは？」という結論にたどり着き、いっちょ拡張機能作ってやるか〜となった次第です。

開発の流れ

ざっくりとメモっておきます。

1. manifest.json を書く。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "manifest_version": 2,
  "default_locale": "ja",
  "name": "__MSG_extName__",
  "description": "__MSG_extDescription__",
  "version": "1.2.1",
  "icons": {
    "128": "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "__MSG_extDefaultTitle__",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}
  • manifest_version … manifestのバージョン。現状 “2” しか存在していないようです。
  • default_locale … 多言語対応する場合のデフォルト値を指定。多言語対応しないのなら不要です。
  • name … 拡張機能の名前。ストアで表示されます。
  • description … 拡張機能の説明。同じくストアで表示されます。
  • version … 拡張機能のバージョン。
  • icons … アイコン画像。サイズは色々ありますが、とりあえず128pxでOK。
  • browser_action … URLバーの右に表示される情報の設定ができます。default_popup でポップアップ用のHTMLを指定します。
  • permissions … 拡張機能がブラウザへ要求する権限の設定です。利用するAPIの種類に応じて設定します。

2. HTMLを書く

ポップアップとして表示される内容を popup.html へ記述していきます。
JSファイルとCSSファイルを読み込ませることもお忘れなく。

jQuery等の外部ソースも利用することが可能です。
余計なmetaタグは書かないようにしましょう。

3. CSSを書く

popup.html内に適用させるためのスタイルを書いていきます。
対象ブラウザはChromeのみなので、新しいCSS3プロパティもガンガン使えます。

4. JSを書く

一番大事な部分です。

ChromeはES6構文が標準でほぼサポートされているので、Babelなどトランスパイラを挟まずともガンガン書くことが可能です。

JS内では、ChromeのAPIを利用することが可能です。

例えば、chrome.tabs を利用することで簡単に現在開いているタブのタイトルやURLを取得することが可能です。
※APIの種類によっては、権限を許可する必要があります。

chrome.tabs - Google Chrome

1
2
3
chrome.tabs.getSelected(null, (tab) => {
  console.log(tab.title, tab.url)
})

様々なAPIが提供されているので、まずは一覧からそれらしきAPIを探してみましょう。

JavaScript APIs

「API名+やりたいこと」でググれば大半は解決できました。

5. 動作確認

作業しているディレクトリを拡張機能として仮インストールします。

「chrome://extensions/」へ移動し、「デベロッパーモード」にチェックを入れ、「パッケージ化されていない拡張機能を読み込む…」から作業しているディレクトリ（直下にmanifest.jsonがあるディレクトリ）を選択します。

インストール済みリストに追加され、URLバーの右側にアイコンが出現すればインストール完了です。

基本的にインストールした拡張機能をクリックして出現するポップアップを確認しながら実装していくのですが、実は下記のURLへアクセスすることで popup.html へ直接アクセスすることができ、デバッグの効率が上がるので活用していきましょう。

もちろん、開発者ツールも利用できます。

1
chrome-extension://ID/popup.html

IDの部分には、拡張機能の識別IDが入ります。
識別IDは、拡張機能一覧ページにて確認することができます。

1
ID: bijbpdfpldnfnpwnphmnhmmhgiwdmgga

6. 多言語対応

多言語対応を行うには、下記のように _locales ディレクトリを追加します。

1
2
3
4
5
_locales
  ├── en
  │   └── messages.json
  └── ja
      └── messages.json

対応したい言語ごとに messages.json を用意し、任意のキーを用意し、キーのmessage値へ言語ごとに表示を切り替えたい内容を記述していきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// フォーマット
{
  "キーの名前": {
    "message": "言語ごとに表示を切り替えたい内容"
  },
  ...
}
// 英語
{
  "extName": {
    "message": "atoyomi - Read later"
  },
  "extDescription": {
    "message": "Save the web page temporarily for later reading."
  },
  ...
}
// 日本語
{
  "extName": {
    "message": "atoyomi - あとで読む"
  },
  "extDescription": {
    "message": "atoyomiは、現在開いているページを一時的に保存し、「あとで読む」ことができる拡張機能です。"
  },
  ...
}

キーの名前は、すべての言語で共通になっている必要があります。
キーの命名に関しては、キャメルケースで指定する必要があるということ以外は特に制限はありません。

上記で設定したキーを、ルートディレクトリにある manifest.json に設定します。
__MSG_キーの名前__ というフォーマットで記述していきます。キーの名前 部分には、先ほど言語別で設定した manifest.json の値を設定することで、呼び出すことができます。

ブラウザの言語環境に応じてChromeが自動判別してくれますので、分岐処理を書くなどの必要はありません。

1
2
3
4
5
{
  "name": "__MSG_extName__",
  "description": "__MSG_extDescription__",
  ...
}

JS内で設定した内容を呼び出したい場合は、chrome.i18n を利用します。
言語別で設定した manifest.json の値が返り値として戻ってきます。

1
chrome.i18n.getMessage('キーの名前')

HTMLは chrome.i18n が利用できないので、別途JSのinnerTextなどで書き換える必要があるようです。

7. ストアで公開する

https://chrome.google.com/webstore/developer/dashboard?hl=ja

上記ページから拡張機能を登録することができます。

デベロッパー登録料として5ドルの課金が必要になりますが、一度払ってしまえば以降は登録し放題です。

公開までは手順に従って作業を進めていけば良いので、特に躓くポイントもありませんでした。
ただ、サムネイル画像やスクリーンショットの作成が少し面倒でした😭

https://chrome.google.com/webstore/detail//bijbpdfpldnfnponpjmnhmmhgildmgga?hl=ja

登録後、約1時間後ほどでストアに並ぶようになります。

パッケージを更新したい場合は、ダッシュボードの「編集」から「更新パッケージをアップロード」すればOKです。
manifest.json の version 値を上げておくこともお忘れなく。

意外とすんなりできた

とりあえずこれで、自分が欲しかった機能は実装できたので満足です。

ストアを経由せずとも拡張機能のディレクトリをChromeに読み込ませれば良いので、社内用のツールとか作って配布したら色々捗りそうですね。

また暇つぶしが一つ増えたのでした。
おわり。

demo