17/06/01

Google Chromeの拡張機能を作ってみる~基礎知識~



 

今回から数回にわたり、Google Chromeの拡張機能の作り方を解説していきます。
基本的にはhtml、css、jsが基本的に分かっていれば問題なくできると思います。
今回は前提知識をまとめていきます。

 

完成品は以下のようになります。

 

chrome拡張機能を作成の記事一覧
基礎知識
ポップアップの表示とjsのデバック方法
タイマーの情報を管理とバッジに表示する
コンテキストメニューを表示する
タイマーが終了したら通知する

拡張機能の種類

googleの拡張機能はいくつかの種類があります。

Browser Action

Browser Actionはブラウザの右上にアイコンが表示されている拡張機能です。
頻繁みかける拡張機能です。

 

 
ドキュメント
chrome.browserAction – Google Chrome

Page Action

Page Actionは特定のページを開いたときにURL欄の横にアイコンが表示される拡張機能です。
RSS系などによく使われます。

 
RSSが有効のサイトの時

 
RSSが無効のサイトの時

 
ドキュメント
chrome.pageAction – Google Chrome

Override Pages

Override Pagesは表示しているページを代替できる拡張機能です。
新しいタブの表示画面や履歴画面を代替します。

置き換えられるページは
bookmarks、history、newtabになります。

 
左がデフォルトの新しいタブで、右が拡張機能で代替した新しいタブです。

 
ドキュメント
Override Pages – Google Chrome

よく使う独特のファイル群

次にファイル群について説明していきます。
よく利用して、なおかつ、google拡張機能の独特のファイルのみ解説してきます。

Manifest.json

googleの拡張機能を作るうえで必須の設定ファイルです。
拡張機能のファイル情報や権限、プロフィールなどのメタ情報を定義します。

 
ドキュメント
Manifest File Format – Google Chrome

Content scripts

表示しているwebページにjsやcssを挿入する際に用います。
例えば、ページの文字の大きさを変更したり、色を変えたりできます。
今回は利用しません。

 
ドキュメント
Content Scripts – Google Chrome

Background

拡張機能を有効にしている場合にバックグラウンド(裏)でずっと動いてるスクリプトです。
データの管理などや、ある程度時間がたった後に通知を送るなどができます。

 

注意点として、公式ページにもあるように、backgroundは常にメモリを食います。
その改善策として、イベントページがあります。
今回はbackgroundを利用します。

 
ドキュメント
Background Pages – Google Chrome

Event page

Event PageはBackgroundと同じように裏で動くスクリプトです。
しかしBackgroundとは異なり、一定の時間が経過すると無効になります。

 
ドキュメント
Event Pages – Google Chrome

Browser action

先ほど紹介した拡張機能の種類、Browser ActionとPage Actionはポップアップを設定することができます。

 

今回は以上になります。
次回から実際に手を動かしていきます。

 

参考にさせていただいた記事
全体像をつかむのに役に立ちます。
Chromeのオリジナル拡張機能を開発しよう(ソースコードあり) | 株式会社LIG

 

さらに詳しい説明。こちらもわかりやすいです。
初めてでも理解できるようになる「Google Chrome機能拡張の開発」 | OXY NOTES

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。