Posted at

Chrome Extensionの個人開発メモ

More than 3 years have passed since last update.


概要

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で好きなようにブラウザを操作できるので、便利