ページ

ラベル アドオン の投稿を表示しています。 すべての投稿を表示
ラベル アドオン の投稿を表示しています。 すべての投稿を表示

2013年7月16日火曜日

Chrome アドオン開発 No.1 ポップアップアドオンを作成

Google Chromeのアドオンを作ろうと思い調べたことをメモしていきます。
様々なことが可能なアドオンですが、複雑のため勉強がてらのまとめとなります。
動作イメージは下記です。

アドオン動作イメージ

簡単なポップアップですが楽ではありますが
マニュアルを自力で読解は面倒です。


環境
環境情報 構築日 ソフトウェア
Google Chrome【mac版】 2013/07/16 27.0.1453.116

とりあえずアドオンにアイコンが必要なのでicon.pngを用意
19×19のサイズで用意します。

icon.png




続いてマニフェストファイル「manifest.json」を用意します

{
  "name": "アプリ名称",
  "manifest_version" : 2,
  "version": "1.0", 
  "description": "アドオンの説明.", 
  "browser_action": { 
    "default_icon": "icon.png", 
    "default_title": "サンプル", 
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://localhost/"
  ]
}

上記がマニフェストとなる。
「manifest_version」はおまじないで無視した方が良い
chromeのバージョンに依存するみたいである。

マニフェストファイルでの注目点は下記２つである

  • browser_action
    • 指定したアイコンをクリックするとポップアップが洗われる
  • permissions
    • 有効なサイトを固定する

permissionsはセキュリティの意味で利用しますがすべてのサイトが
対象の場合は必要ありません。

続いてpopup.htmlとなります。

<html>
<style>
body {
  min-width:357px;
  overflow-x:hidden;
}
</style>
<body>
adin test
</body>
</html>

これで準備が完了です。
続いて、chromeで動作させるための行いかたです
「設定」>>「機能拡張」>>「パッケージ化されていない拡張機能を読み込む」
を選択肢、上記3ファイルが保存されているディレクトリに移動させれば
アドオンが動作します。

とりあえず第１弾のアドオン開発メモです。
投稿者 時刻:
ラベル: , , ,
登録: 投稿 (Atom)