Google Chrome拡張で特定のページで動くJavaScriptを書く

http://www.google.com/ でJavaScriptを動かしてみます。

手順

manifest.jsonにcontent_scriptsを書く

{
  "name": "Sample",
  "version": "1",
  "manifest_version": 2,
  "description": "This is sample",
  "content_scripts": [{
    "matches": ["https://www.google.co.jp/*"],
    "js": ["script.js"]
  }]
}

matchesでマッチしたサイトでjsで指定したScriptがrun_atのタイミングで実行されます。

script.jsを追加

console.log('hello chorme extension')

Google ChromeでChrome拡張を読み込む

1. Google Chromeでchrome://extensions/を開く
2. 右上のデベロッパー モードにチェックを入れる
3. パッケージ化されていない拡張機能を読み込む...ボタンを押す
4. manifest.jsonを入れたフォルダを開く

動作確認

Google Chrome で http://www.google.com/ を開いて開発ツールを起動します。

コンソールに次の文字が表示されたら成功です。

hello chorme extension

参考リンク

• jQuery を使って 30 分で Chrome 拡張を作ってみた (フェンリル | デベロッパーズブログ)
• Content Scripts - Google Chrome

合わせて読みたい

• 最小構成のGoogle Chrome拡張を作る