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言語 数式を描画する
コメント