Symfoware

Symfowareについての考察blog

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

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

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



チュートリアル



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

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


  1. {
  2. "manifest_version": 2,
  3. "name": "One-click Kittens",
  4. "description": "This extension demonstrates a browser action with kittens.",
  5. "version": "1.0",
  6. "browser_action": {
  7.     "default_icon": "icon.png"
  8. }
  9. }




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

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

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

486_01.png


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

486_02.png


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





拡張機能のインストール



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

486_03.png


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

486_04.png


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

486_05.png


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

486_06.png





ポップアップの表示



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


  1. {
  2. "manifest_version": 2,
  3. "name": "One-click Kittens",
  4. "description": "This extension demonstrates a browser action with kittens.",
  5. "version": "1.0",
  6. "browser_action": {
  7.     "default_icon": "icon.png",
  8.     "default_popup": "popup.html"
  9. }
  10. }




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


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


■popup.html


  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>Getting Started Extension's Popup</title>
  5.     <style>
  6.      body {
  7.         min-width: 357px;
  8.         overflow-x: hidden;
  9.      }
  10.      img {
  11.         margin: 5px;
  12.         border: 2px solid black;
  13.         vertical-align: middle;
  14.         width: 75px;
  15.         height: 75px;
  16.      }
  17.     </style>
  18.     <!--
  19.      - JavaScript and HTML must be in separate files: see our Content Security
  20.      - Policy documentation[1] for details and explanation.
  21.      -
  22.      - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
  23.      -->
  24.     <script src="popup.js"></script>
  25. </head>
  26. <body>
  27. </body>
  28. </html>




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

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


■popup.jp


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




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


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

486_07.png


拡張機能をリロード。

486_08.png


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

486_09.png

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/10/27(月) 22:41:50|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Google Chrome(38.0.2125.104) 拡張機能のデバッグ方法 | ホーム | R言語 平均値、中央値、標準偏差などの求め方>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1513-23b22521
この記事にトラックバックする(FC2ブログユーザー)