読者です 読者をやめる 読者になる 読者になる

hoge

種類

  • Browser actions
    • アドレスバーの右側にアイコン表示するタイプ
  • Page actions
    • 特定のページに対してアクションするタイプ
  • Override Pages
    • ブックマークマネージャー、履歴、新しいタブをカスタマイズできるタイプ
    • カスタマイズ箇所は1つの拡張機能につき1つのみ
  • 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_startCSSが読み込まれた直後。DOMはまだ構築されていない
    • document_end:DOMの構築後。画像やフレームはまだ読み込まれていない
    • document_idle:デフォルト。document_endとwindow.onloadの間に実行

js/index.js

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