hoge

種類

• Browser actions
  • アドレスバーの右側にアイコン表示するタイプ
• Page actions
  • 特定のページに対してアクションするタイプ
• Override Pages
  • ブックマークマネージャー、履歴、新しいタブをカスタマイズできるタイプ
  • カスタマイズ箇所は１つの拡張機能につき１つのみ
• Apps
  • chrome://apps/ の項目に表示されるタイプ

Hello Worldを表示させる

まずは「 manifest.json」をつくる

{
  "manifest_version": 2,
  "name": "hoge Ex",
    "version": "1.0",
    "description": "sample extension.",
  "icons": {
    "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
  }
}

{
    "manifest_version": 2,
  "name": "hoge Ex",
    "version": "1.0",
    "description": "sample extension.",
  "icons": {
    "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://*.google.co.jp/*"],
      "js": ["js/index.js"],
      "run_at" : "document_idle"
    }
  ]
}

• matches: 実行するURL。正規表現可だがhttpから記述する必要がある
• js: 実行するJavascriptのパス
• run_at：実行するタイミング
  • document_start：CSSが読み込まれた直後。DOMはまだ構築されていない
  • document_end：DOMの構築後。画像やフレームはまだ読み込まれていない
  • document_idle：デフォルト。document_endとwindow.onloadの間に実行

js/index.js

document.body.style.backgroundColor = '#000';