JavaScript
chrome-extension

Chrome Extensionの個人開発メモ

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