Chrome Extensionの個人開発メモ

概要

WebページをXPathと正規表現で検索した結果を表示するChrome Extensionを作った時に感じたことの備忘録

ファイル構成

files

chrome_extension
├── images
│   └── icon.png
├── manifest.json
├── scripts
│   ├── background.js
│   ├── icecrepe.js
│   ├── opjs.js
│   └── popup.js
└── views
    └── popup.html

manifest.json

{
  "manifest_version" : 2,
  "name" : "icecrepe",
  "description" : "Web page scraping extension.",
  "version" : "0.0.0.1",
  "browser_action" : {
    "default_icon" : "images/icon.png",
    "default_popup" : "views/popup.html"
  },
  "background" : {
    "scripts" : [ "scripts/opjs.js", "scripts/background.js" ]
  },
  "content_scripts" : [{
    "matches" : [ "<all_urls>" ],
    "js" : [ "scripts/opjs.js", "scripts/icecrepe.js" ]
  }]
}

キー	値	説明
manifest_version	2	manifest.jsonのバージョン
name	icecrepe	Extensionの名前
description	Web page scraping extension.	Extensionの説明
version	0.0.0.1	Extensionのバージョン
browser_action/  default_icon	images/icon.png	ブラウザに表示するExtensionのアイコン(16x16)
browser_action/  default_popup	views/popup.html	アイコンをクリックした時にポップアップ表示するページ
background/  scripts	[ "scripts/opjs.js", "scripts/background.js" ]	バックグラウンドで実行するスクリプト
content_scripts/  matches	[ "<all_urls>" ]	Webページを操作するスクリプトの実行対象URL
content_scripts/  js	[ "scripts/opjs.js", "scripts/icecrepe.js" ]	Webページを操作するスクリプト

Chrome Extension特有の概念

• ページに対するアクションの違い

アクション	説明
browser_action	全てのページで実行するアクション
page_action	特定のページで実行するアクション

• ブラウザアクションの実行順序

1. ブラウザに表示されたアイコン(images/icon.png)をクリックする
2. Extension用ページ(views/popup.html)がポップアップ表示される
3. 必要に応じてExtension用ページ(views/popup.html)で読み込んだスクリプト(scripts/popup.js)からブラウザを操作
   • ブラウザに対する操作はコンテンツスクリプトでしか実行できないため、バックグラウンドスクリプトを経由してコンテンツスクリプトとメッセージの送受信を行う
     scripts/popup.js <-> scripts/background.js <-> scripts/icecrepe.js
   • 複雑なデータは送受信できないので、JSONに変換する

Chrome API

自分が使用したものをリストアップ

実行スクリプト	メソッド	用途
popup	chrome.extension.getBackgroundPage	バックグラウンドスクリプトの取得
background	chrome.tabs.query	ブラウザで表示しているタブ情報の取得
	chrome.tabs.sendMessage	特定タブのコンテンツスクリプトにメッセージを送信
content	chrome.extension.onMessage.addListener	メッセージ受信用メソッドの追加

成果物

icecrepe

まとめ

• Chrome Extension特有の概念を理解するのに一苦労したが、理解してしまえばJavaScriptで好きなようにブラウザを操作できるので、便利