Edited at

Chromeエクステンションを作ろう

More than 3 years have passed since last update.

とある事情により、ChromeエクステンションでRedmineサイトで機能するプラグインを趣味で作ることになりました.

Chromeウェブストアに公開まで行ったので、公開したプラグインの紹介がてらにChromeエクステンションについてわかったことなどを何回かに分けて書いていきます.

プラグインはこちらからインストールできます. 一人でも多くの方に利用いただければ幸いです.

ソースコードはこちらから閲覧できます.

Redmineを利用できる環境がない場合は、Redmineのデモサイトで動作を確認することができます.


Chromeエクステンションとは?

Chromeに拡張機能を追加する仕組みになります.

Chromeエクステンションはただの圧縮フォルダです.

そのフォルダの中身はただのHTMLやCSS、Javascriptファイルです.

一般的なWebページを作ることができれば、Chromeエクステンションも作ることができます.

Chromeエクステンションでは、Chrome-Javascript-APIを利用することができます.

このプラグインでは、次のAPIを利用しています.



  • extension ... バックグラウンドページとの通信, リソースファイルのURL解決


  • storage ... 設定値の保存


  • runtime ... バックグラウンド通信や保存処理のエラー判定


  • i18n ... メッセージの国際化


Chromeエクステンションの種類


コンテントスクリプト

特定のWebページに、JavascriptやCSSなどを挿入できます.

このプラグインで主に利用した機能になります.


バックグラウンドページ

Chromeの起動中、常駐するページです.

このプラグインでは、コンテントスクリプトからGoogleAnalyticsによる統計収集を実行するために利用しています.


オプション画面

プラグインの設定画面です.

このプラグインでは、コンテントスクリプトで設定した内容を編集するために利用しています.


ブラウザアクション

アドレスバーの右側にアイコンを追加します.

そのアイコンに加えて、ツールチップ、バッジ、ポップアップも追加することができるそうです.

※利用していないため、詳細は分かりません

browser-action.png


ページアクション

アドレスバーの内側にアイコンを追加します.

アイコンはページによって表示制御ができるようです.

※利用していないため、詳細は分かりません

page-action.png


Override Pages

Chrome内部のページを置換できるようです.

下記ページを置換できますが、1つのエクステンションでは1つのページしか置換できないようです.

※利用していないため、詳細は分かりません


  • Bookmark Manager

  • History

  • New Tab


野良.crxについて

Windows版のChrome v33以降では、再起動時に野良.crxが無効になります.

企業内用途や個人用途でも、Windows版ユーザがいる場合にはChromeウェブストアへ公開する必要があります.

⇒ Macで開発していたため、終盤まで気づきませんでした orz


リンク