Google Chrome 拡張機能の作り方(V2対応)

ずいぶん前に、Google Chromeの拡張機能を作ってみました。
Google Chrome Extensions (拡張機能)の作り方

あれから仕様が変更されているようなので、改めて作り方を調べてみます。
なお、実行時のChromeのバージョンは「38.0.2125.104 (64-bit)」です。

チュートリアル

こちらを参考に作成します。
Getting Started: Building a Chrome Extension

まず必要になるのは、拡張機能の基本設定を記載した
「manifest.json」というファイルです。


{
 "manifest_version": 2,
 "name": "One-click Kittens",
 "description": "This extension demonstrates a browser action with kittens.",
 "version": "1.0",
 "browser_action": {
    "default_icon": "icon.png"
 }
}

以前のバージョンから"manifest_version": 2という記載が追加されています。

使用するアイコンは「icon.png」という画像ファイルという指定を行います。

ちなみに、使用するアイコンはこちら。

manifest.jsonと同じ階層に保存しておきます。

これが拡張機能の最小構成となります。

拡張機能のインストール

右上のボタンから「設定」を選択。

左側の「拡張機能」を選択して、「パッケージ化されていない拡張機能を読み込む」をクリック。

manifest.jsonやicon.pngを保存しているフォルダを選択します。

拡張機能が読み込まれました。
ボタンが表示されますが、押しても反応はありません。

ポップアップの表示

ポップアップを表示するため、manifest.jsonに一行追加します。


{
 "manifest_version": 2,
 "name": "One-click Kittens",
 "description": "This extension demonstrates a browser action with kittens.",
 "version": "1.0",
 "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
 }
}

「"default_popup": "popup.html"」を追加しました。
以前は「"popup"」という名称でしたが、変更されたようです。

manifest.jsonと同じ階層に「popup.html」を作成します。
内容は以下のとおり。

■popup.html


<!doctype html>
<html>
 <head>
    <title>Getting Started Extension's Popup</title>
    <style>
     body {
        min-width: 357px;
        overflow-x: hidden;
     }
     img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
     }
    </style>
    <!--
     - JavaScript and HTML must be in separate files: see our Content Security
     - Policy documentation[1] for details and explanation.
     -
     - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
     -->
    <script src="popup.js"></script>
 </head>
 <body>
 </body>
</html>

以前は同じファイルにjavascriptも記載していましたが、
htmlとjavascriptファイルは分ける流儀になった模様。

引き続き、「popup.jp」を同じ階層に作成します。

■popup.jp


document.addEventListener('DOMContentLoaded', function () {
 var div = document.createElement('div');
 div.innerHTML = 'hello world!';
 document.body.appendChild(div);
});

DOMのロードが完了したら、ポップアップにhello world!を表示します。

フォルダの中身はこのようになりました。

拡張機能をリロード。

ボタンを押すと、hello world!が表示されました。

関連記事

特定のページの内容を変更するChrome拡張の作り方とデバッグ方法
Google Chrome(38.0.2125.104) 拡張機能のデバッグ方法
Google Chrome 拡張機能の作り方(V2対応)
R言語　平均値、中央値、標準偏差などの求め方
R言語　数式を描画する

Symfoware