ChromeExtensions 基礎

頭の固い業務ページでの単純作業に時間を割かれることが耐えがたく、
シェルスクリプトのように拡張機能を使おうと思い立ち、数日前に入門した。

誤認があるかも知れない。

何ができるのか

大きくわけて2つ。後者をやりたい。

• webサービスのAPIを使って、いろいろできる

• 特定の条件のときにスクリプトを実行できる

他にもいろいろできるが、話が逸れるので割愛。

何をしたいのか

• ページへのDOM操作やCSS挿入

• ショートカットキー（キーバインド）の割り当て

この記事の目標

• 基礎的な概要と単語の整理

拡張機能の起動契機

大きく分けて4種類

• browser_action: アドレスバーの右にアイコンを表示

• page_action: 特定のページのみアドレスバーにアイコン表示

• content_scripts: 特定の条件のみスクリプト実行

• contextMenus: 右クリックのメニュー表示

browser_action: アドレスバーの右にアイコンを表示

• ポップアップ（HTML）を表示できる

• background からイベントを受けると、特定の条件に反応させることができる

• 基本的に常駐するため、webサービスとの連携に使われることが多い（はてブ等）

page_action: 特定のページのみアドレスバーにアイコン表示

• background がイベントを受けて、アイコンを表示させる

• background がイベントを受けて、クリック時に動作させる

content_scripts: 特定の条件のみスクリプト実行

• Manifest に規定した URL にマッチした時に、スクリプトを実行させることができる

• https://developer.chrome.com/extensions/content_scripts

contextMenus: 右クリックのメニュー表示

• background に規定した条件にマッチした時に、右クリックのメニューを表示させることができる

Manifest.json

• 拡張機能の構成を規定する

• "browser_action" と "page_action" は二者択一（両方を持つ拡張機能をつくることはできない）

• https://developer.chrome.com/extensions/manifest

background

• Chrome のイベントをハンドルできる。

• 各スクリプトとメッセージをやりとりできる。

• 基本的に、常に動作する（メモリ消費する）。

Event Pages

• "persistent": false とすると、必要な時だけに動作するようになる（メモリ消費を抑えられる）。

• ただし、右クリックのメニュー表示はできなくなるので注意。

• https://developer.chrome.com/extensions/event_pages

chrome.* APIs

• Chrome のイベントをハンドルできる

• 公開されている各機能を制御できる

参考

公式（英語）

• https://developer.chrome.com/extensions

ドットインストールさんの素晴らしい教材。
ここを見れば、約1時間でつくりかたの基本が学習できます。
3分以内の動画、全20回。
・動画の閲覧: 会員登録不要
・進捗の管理等: 会員登録必要（無料）
・ソースのダウンロード等: プレミアム会員登録必要（有料）

• http://dotinstall.com/lessons/basic_chrome_v2