[Chrome] 公式推奨方法で拡張機能を作ってみた！[執筆中]

チュートリアル

エクステンションは、コンポーネントといういくつかのまとまりで作られています。コンポーネントには、以下の要素を含めることができます。

• バックグラウンドスクリプト
• コンテンツスクリプト
• オプションページ
• UI要素
• およびさまざまなロジックファイル

コンポーネントは、Web開発テクノロジ（HTML、CSS、およびJavaScript）で作成され、その機能に依存し、すべてを必要とするとは限りません。

このチュートリアルでは、developer.chrome.comの任意のページの背景色をユーザーが変更できるようにする拡張機能を構築します。コアコンポーネントを使うことになるでしょう。

完成した拡張機能はこちらからダウンロードできます。

完成した拡張機能はこんな風になります。

🔻実行後🔻

ファイル構成

サンプルの拡張機能のファイル構成は上記の画像のようになっています。

ざっくりと各ファイルの役割はこんな感じです。

• images
  • ブラウザに表示されるアイコン画像が格納されている
• background.js
  • バックグラウンドで実行するスクリプト
• manifest.json
  • 設定ファイル
• options.html
  • オプション画面
• options.js
  • オプション画面で実行するスクリプト
• popup.html
  • ポップアップ画面
• popup.js
  • ポップアップ画面で実行するスクリプト

これらのファイルは全てmanifest.jsonで管理されています。

manifest.json

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "options_page": "options.html",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

• name
  • 拡張機能の名前
• version
  • 拡張機能のバージョン
• description
  • 拡張機能の説明
• permissions
  • 使うchrome APIをここで宣言
• options_page
  • オプションページになるhtmlファイル
• background
  • scripts
    • バックグランドで実行するjsファイル
  • persistent
    • バックグランドスクリプトが永続的に実行するのは非推奨なためこの値はfalseが推奨です
• page_action
  • default_popup
    • ポップアップになるhtml
  • default_icon
    • ツールバーに表示される拡張機能のアイコン
• icons
  • ストアなどで使われる拡張機能のアイコン
• manifest_version
  • ２を指定

background.js