console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

特定のURLで動作するChromeExtensionをつくる

Google Chromeのエクステンションのネタです。

昔書いた記事もありますが、イマイチ実践的な感じではないので改めて。

参考:いまさらまとめるChrome ExtensionでのJavaScript挿入 - console.lealog();

とはいえやはり、タブどうしでやりとりしたり・・はしてません。
Page Actionといわれる拡張機能の体裁を取り繕うために、何が必要かをメモしただけです。

特定のURL・ページで動作させる

キーワードは以下。

  • Page Action
  • Content Script

Page Action

Chromeのエクステンションには2種類あって、

  • Browser Action
  • Page Action

どこのページでも使えるはてブのやつみたいなのはBrowser Actionです。
SPDY対応かどうかチェックするやつみたく、特定のURLでアレコレしたいものがPage Actionです。

実際は「どこにアイコン出したいか」の差しかないような認識です・・。

Content Script

拡張機能側から閲覧してるページに対してコードを差し込むためにはいくつか方法がありますが、
その中で一番お手軽で強力なやつがコレ。

コード

今までは逐一ココに書いてましたが、今回はGithubにあげてありますのでそちらをどうぞ。

参考:leader22/chrome-page-action-scheleton

ポイント

箇条書きで。

  • background.jsからアクセスできるwindowは、閲覧してるページのwindowとは別モノ
  • main.jsは、manifest.jsonでweb_accessible_resourcesの指定をする必要がある
  • content_scriptの設定にあるrun_atはアテにしちゃいけない
  • 特定のURLかどうかは、manifestのmatchで絞るか、main.jsでLocationから判断
  • 単純にコード実行したいだけならContent Scriptだけで問題ない
  • 無名関数でくくってるけどたぶんいらない