#はじめに
GoogleのChrome拡張の公式が出してるチュートリアルを解説します。
僕なりに分かりやすくなるように、公式の流れに沿って書こうと思います。
ただの翻訳といえば否定できませんが、それだけだとつまらないので、ところどころ補足欲しいなぁ〜て自分が感じたところを付け足していきます。
僕は英語が嫌いなので、僕と同じように英語で書いてあるサイト読むのだりぃ〜って人の役に立てばと思います。
前編と後編に分かれていて、前編ではユーザから見えないシステム側の設定になります。
- マニフェストファイルの作成
- アップロード
- Backgroundファイルの作成
の順番に説明していきます。
後編はこちらです。
##3つの世界
説明に入る前に、僕が以前書いたこの記事
を読んでいただけると少しは理解しやすくなるかと思います。
分かりにくかったら、その記事に載せてる参考文献が分かりやすいので、そちらを見てください。
要約すると、Chrome拡張でやりたいことを実現するには
- Background
- Contents Script
- Popup
の3つの世界を使い分ける必要があるってことです。
理解していただけたら、次に進みましょう。
#チュートリアル
さっそく補足ですが、まずは色々なファイルを入れる用のフォルダを作っておきましょう。
場所はどこでも良いです。名前も何でも良いです。
僕は試しに、デスクトップに「testChromeExtension」というフォルダを作りました。
ここに、これから作成するファイルや、アイコンの画像などを入れていきます。
それでは作成していきます。
##1. マニフェストファイルの作成
「Manifest = 公約」という意味から分かるように、決まりごとを書いていくファイルです。
これがないと拡張機能が作れません。
例えば、
- この拡張機能の名前は何なのか
- マニフェストのバージョンは何を使うのか
- アイコンの画像はどれか
- PopupのHTMLファイルはどれを使うのか
などをJSONファイルに書いていきます。
ファイル名は「manifest.json」にしましょう。
公式に書いてあるのはこれです↓
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
とりあえずこれだけです。
簡単に補足すると、
-
name→ 拡張機能の名前（自分で決める） -
version→ 拡張機能のバージョン（自分で決める） -
description→ 拡張機能の説明（自分で決める） -
manifest_version→ マニフェストのバージョン（これは固定、現在＊投稿日現在＊は2を書く）
という意味になります。
自分用に書き換えると、こうなります↓
{
"name": "Test Chrome-Extension",
"version": "1.0",
"description": "これはChrome拡張機能のテストです。",
"manifest_version": 2
}
##2. アップロード
マニフェストファイルを作り終えたら、最初に作成したフォルダに保存しましょう。
早速これをアップロードしていきます。
ローカルで実行するだけですので、実際に拡張機能のストアに公開するわけではありません。
chrome://extensions/ を開きましょう。
（0. まず、⓪のデベロッパーツールをオンにして、「パッケージ化されていない拡張機能を読み込む」、「拡張機能をパッケージ化」、「更新」の3つのボタンを表示させましょう。）
1. ①の「パッケージ化されていない拡張機能を読み込む」というボタンを押しましょう。
英語だと、「LOAD UNPAKED」と書いてあるかと思います。
2. フォルダを選べるようになるので、最初に作成してマニフェストファイルを入れたフォルダ（②）を選択します。
3. 選択！（③）
すると、マニフェストファイルに書き込んだ名前・バージョン・説明・自動生成されたIDが表示されてるかと思います。
アイコンはまだ設定していないので、デフォルトのままですね。
表示されていたら成功です。
表示されていなかったら、ファイル名「manifest.json」やJSONに記入ミスが無いか、manifest_version はちゃんと 2 になっているかを確認してください。
以上がアップロードの手順です。
これからファイルを更新したら、右下のラジオボタンの隣にある更新マークを押せば反映できます。
反映されない場合は、一旦削除してから再びアップロードするなどを試してみてください。
##3. Backgroundファイルの作成
まずは、マニフェストファイルに、「Backgroundのコードはこのファイルに書くよ！」ということ教えてあげる必要があるます。
公式と同じように追加します。
{
"name": "Test Chrome-Extension",
"version": "1.0",
"description": "これはChrome拡張機能のテストです。",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
BackgroundファイルはJavaScriptで記述します。
ファイル名は何でも良いですが、無難に「background.js」とでもしておきましょう。
それぞれの説明をします。
-
permission→ 使うAPI等を記述します。今回はstrage APIを使用します（詳細は後述）。 -
background→ Backgroundに関しての色々を記述します。-
script→ Backgroundファイルのファイル名を記述します。 -
persistent→ 永続的に動くか否か。falseにすることで、backgroundファイルが呼ばれた（通信する時）のみ動きます。永続的に動いているとメモリが無駄に消費されてしまうので、falseにすることをお勧めします。
-
では、実際にBackgroundファイルを作成していきます。
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
ここで使用するstorage APIは、名前の通りデータを保存してくれるストレージのAPIです。
今後書くContents Scriptファイルに書くことで、わざわざBackgroundにデータを移さなくても、データを保持してくれるみたいです。
ただ、容量がそんなに大きく無いのと、セキュリティがガバガバなので個人情報などは扱わない方が良い、というのが注意点です。
-
chrome.runtime.onInstalled.addListener(function() {});→ 拡張機能がインストールされたときや更新された時に関数内を実行する。-
chrome.storage.sync.set({color: '#3aa757'}, function() {});→ 先ほど許可したstorage APIの命令です。colorというKeyに#3aa757というValueをセットしています。-
console.log("The color is green.");→ コンソールに文字を出力します。デバッグなどに使えます。
-
-
とりあえずこれらをコピペして、フォルダに保存してください。
ファイルが保存できたら、chrome://extensions/ で拡張機能を更新しましょう。
すると、「バックグラウンド ページ」というリンクができているかと思います。
そのリンクを押すと、Backgroundのデベロッパーツールが表示されます。
background.jsに書いたコンソール出力は、ここで確認することができます。
これでBackgroundでChrome拡張を開発することはできました。
ただ、まだ見た目には何も変化がないですが、重要な準備段階です。
#おわりに
後編はこちらです。
いよいよユーザから見える部分を開発していきます。
４. Popupファイルの作成
５. Contents Scriptへの反映
６. Optionsの設定
の順番で説明していきます。