Chrome拡張機能 を作ってみる

Chrome拡張機能 で何が出来るのか調べるために、Chrome拡張機能 を作ってみました。

結果としてローカルファイルにアクセスが出来ればよかったんですが、やっぱり厳しいようでした。

Chrome拡張機能

簡単な Chrome拡張機能 を作ってみたいと思います。

manifest.json

始めに作業用フォルダを作って、その中に「manifest.json」という名前で新規ファイルを作成します。

空っぽの「manifest.json」に下記を貼り付ければ、何もしないChrome拡張機能 の完成です。

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 2
}

インストール

作ったからには、インストールして動作確認をしたいと思います。

Chromeメニューを押して「その他のツール」>「拡張機能」の順に選択して 拡張機能の設定画面を開きます。

またはブラウザのアドレスバーに「chrome://extensions/」と入力しても、開く事が出来ます。

この状態だと開発中の拡張機能をインストールする事が出来ないので、右上のチェックをクリックしてデベロッパーモードを有効にします。

デベロッパーモードを有効にしたら「パッケージ化されていない拡張機能を読み込む」から「manifest.json」が保存してあるフォルダを指定して読み込むと、開発中の拡張機能をインストールする事が出来ます。

アイコンをクリックしたらダイアログを表示する

まだ何も機能しないので、簡単な「アイコンをクリックしたらダイアログを表示する」機能を作ってみます。

まず「manifest.json」を下記のように書き換えます。

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 2,
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },
  "browser_action": {}
}

persistent

「”persistent”: false」にする事でイベントページとして扱われるようになります。

なので「呼ばれた時だけ動けばいい」という機能を作る時に向いています。

browser_action

「”browser_action”: { }」この記述が無いと「chrome.browserAction.onClicked」が使えませんでした。

「Uncaught TypeError: Cannot read property ‘onClicked’ of undefined」

browser_action が無い拡張機能はありえないってことなんでしょうね。

background.js

次に「manifest.json」と同じフォルダ内に「background.js」という名前で新規JavaScriptファイルを作ります。

その「background.js」ファイルに下記処理を貼り付けます。

chrome.browserAction.onClicked.addListener(function () {
  return alert('拡張機能を実行しました');
});

これで、アイコンをクリックしたらダイアログを表示する機能が出来ました。

ファイルを保存してから、Chromeの更新ボタンを押して拡張機能を再読み込みさせます。

実行

アイコンをクリックしてダイアログが表示されれば成功です。

終わりに

なるほど、こんな感じに作っていけばいいのか。ってのが分かりました。

今回はダイアログを表示しましたが、指定したサイトを表示させたり、表示中のサイトに手を加えたり、いろいろな事が出来るはずです。

また何か面白い使い方が浮かんだら、試してみようと思います。

参考

https://developer.chrome.com/extensions