Chromeブラウザのプラグインを独自開発するためのリンク集 - モバイル通信とIT技術をコツコツ勉強するブログ

Chromeブラウザのプラグインを自作しよう。

入門に役立つページを集めた。

Chromeの場合

ポップアップ型のアドオンを簡単に作る：

Google Chrome Extensionを作ってみた｜ Developers.IO
http://dev.classmethod.jp/ria/google-...

ブラウザのアドレスバーの横にボタンを設置し，それを押下するとポップアップ画面が表示され，特定のサイトのRSSフィードをHTMLとして一覧表示するような自作アドオン。

Chromeのエクステンションには3つのタイプがあります。

browser action：アドレスバーの隣にアイコンが出てくる。アイコン押下で何か処理が走る

popup：アドレスバーの隣にアイコンが出てくる。アイコン押下で何か画面をポップアップさせる

page action

デプロイ方法

作成したエクステンションをChromeにインストールする

拡張機能＞デベロッパーモード＞「パッケージ化されていない拡張機能を読み込みます」を押下＞フォルダ選択画面で先ほど作成したフォルダを選択

Google Chrome Extensions (拡張機能)の作り方 - Symfoware
http://symfoware.blog68.fc2.com/blog-...

Hello World と書かれたシンプルなHTMLをポップアップするだけの自作アドオン。

manifest.jsonの中に，アドオンのアイコン画像を指定している。

manifestファイルについて：

jQuery を使って 30 分で Chrome 拡張を作ってみた (フェンリル | デベロッパーズブログ)
http://blog.fenrir-inc.com/jp/2012/09...

jQuery を使って、検索結果ページにファビコンを追加する Chrome 拡張をサクッと作ってみました。

Chrome拡張には, manifest.jsonという設定ファイルが必要

私はどんな拡張で、どんなリソースにアクセスしますよ、とかどんなサイトで動きますよ、っていうのを書いておきます

jQueryもここで読み込みます

manifestのバージョンが2以降は, セキュリティがかなり厳しくなって、インラインスクリプトとかが書けなくなりました。

画像ファイルなんかも、何を読み込むか、ちゃんと、manifest内に記載が必要です。

Chrome Extensionを作ってみた - wataメモ
http://wata.hateblo.jp/entry/2012/08/...

アドレスバーの内側と外側の２タイプ

アドレスバーの中のタイプはpage actionsと呼ばれていて、特定のページで要素を表示、非表示するのに適している

アドレスバーの隣に出るアイコンはbrowser actionsと呼ばれている。

どちらもツールチップ、バッジやポップアップをつけることが出来る。

必要な技術要素としては，マニフェストファイルを書くためにJSONとHTMLとJavaScriptのみ。

イメージとしてはWeb画面を作っている感じなので, 今までのWebサイトの構築のノウハウをそのまま使うことが出来る。

ディレクトリ構成を作って画像やらを入れておけばアイコンとして使えたりもする。

JavaScriptはHTMLの中にscriptタグを作ってインラインに書くことは出来ず、必ず別のjsファイルとして分けることが必須

ちょっと面倒だがセキュリティ観点の為

Extensionを公開するにはChrome ウェブストアのデベロッパー登録($5.00)が必要

コーディングの方針について：

独自のブラウザー拡張機能を作成する: 第 1 回、Chrome を拡張する
http://www.ibm.com/developerworks/jp/...

ブラウザー拡張機能の一般的な用途としては・・・

ブラウザーが別のアプリケーションまたはサービスとやりとりできるようにすること。そのような拡張機能としては、Evernote、1Password、Adobe Shadow をはじめ、数多くの例があります。

また、ブラウザーに欠けている機能を新しく追加するために、開発者用ツールやスクリーン・キャプチャー・ユーティリティーを追加する場合もあります。

ここでは，「ユーザーが何らかの理由でアクセスしたくない特定のドメインをブロックできるようにするための拡張機能」を自作

Chrome に接続する方法は、chrome.tabs.onUpdated.addListener を使用してコールバックを渡すこと

chrome.* API 呼び出しはそれぞれに異なりますが、一般にメソッドを呼び出してコールバックを渡します。

これらの API 呼び出しのほとんどは、非同期です。そのため、この動作を予期していなければ、タイミングの問題が発生する可能性があります。この件に関しては、リファレンス・マニュアルの説明を読んでください。

拡張機能のパッケージ化が完了したら、そのパッケージを自分の気に入った方法で配布することができます。

つまり、e-メールで送信することも、Web サイトにアップすることも、独自のインストーラーを作成してパッケージ化することも、フラッシュ・ドライブに収容することも可能

天使やカイザーと呼ばれて » 僕が考えたChrome拡張機能を作るときのデザインパターン
 http://www.eisbahn.jp/yoichiro/2012/1...

最近いくつかのChrome拡張機能を作っていて、すでに数千人のユーザを獲得できている

これだけ作ってると、自分でのChrome拡張機能を作り出す際のデザインパターン，テンプレが確立されてきます。ここでそのテンプレ達を晒しておこう

アドオン内にGoogle Analyticsを最初から仕込んでおく。

利用ユーザの増加をグラフで把握することができるようになって、毎日「うひひ」と喜ぶことができるようになりオススメ

Chrome拡張機能の開発では、Dev toolsを頻繁に使います

ポップアップウィンドウや設定ページ、その他何かページを拡張機能に持たせた際に、その通信内容を見たりエラーの内容を把握したりするために、Dev toolsと行ったり来たりする

特にポップアップウィンドウは開いたり閉じたりする。ポップアップウィンドウが閉じてしまえば、それに対応したDev toolsのウィンドウも閉じてしまう。そのため，デバッグが非常に面倒

ポップアップウィンドウ内のHTMLやJavaScriptに対するデバッグであれば仕方ないのですが、せめてAjax通信に関することについては、background.jsに切り出しておいた方が、Dev toolsを開いた状態を維持できるようになるため、開発を楽にすることができます。

APIリファレンス・公式マニュアル：

JavaScript APIs - Google Chrome
https://developer.chrome.com/extensio...

Chrome provides extensions with many special-purpose APIs like chrome.runtime and chrome.alarms.

Chrome Extensions API リファレンス
http://dev.screw-axis.com/doc/chrome_...

日本語訳だが，2015年からアクセスできなくなっている。

参考：Firefox等の場合

Firefox（XUL/XPI形式）：

画面上の邪魔なものを自動ブロックする Firefox プラグインの作り方　　（XPI アドオンを自作しよう）
http://language-and-engineering.hatenablog.jp/entry/20081129/1227955571

Firefoxのサイドバーを作ろう　（XUL形式のアドオンでbrowser要素を設定する方法）
http://language-and-engineering.hatenablog.jp/entry/20081203/1228262334

開いている全タブのURLとタイトルを，列挙して抽出するFirefoxアドオン　（XUL形式プラグインのソースコード付）
http://language-and-engineering.hatenablog.jp/entry/20121221/p1

IE：

今から３分で，IE 上で .NET のDLLを動かそう（ブラウザ上で C# のコードを動かす方法）
http://language-and-engineering.hatenablog.jp/entry/20100705/p1

ブラウザ比較のまとめTOPへ