メインコンテンツまでスキップ

Chrome Extension概要

· 約5分

投稿の内容​

本投稿では、Chromeの拡張機能であるChrome extensionの開発を始める前の基礎知識についてご紹介します。 ここに載っている情報は、ほぼすべて公式ページから取得することができます。 本投稿は、公式ページの中でもArchitecture overviewのまとめになります。

使用する言語​

Chrome extensionを開発するために使用する言語はJavaScriptです。

以下のnpmパッケージを使えばTypeScriptでの開発も可能です。

https://www.npmjs.com/package/chrome-types

マニフェスト​

プロジェクトルートに配置するプロジェクトの設定ファイルです。 後述する３つの主要機能のスクリプトファイルやChrome extensionのアイコンの場所などを指定します。

このファイルはJSONで記述します。 書式は公式サイトのこのページで確認することができます。

マニフェストの例​

以下は公式ページに載っていたマニフェストのサンプルです。

{
  "manifest_version": 3,
  "name": "Reading Time",
  "description": "Add the reading time to Chrome Extension documentation articles",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "content_scripts": [
    {
      "js": [
        "scripts/content-script.js"
      ],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}

ディレクトリ構造​

以下はChrome extensionの標準的なディレクトリ構造です。

.
├── manifest.json
├── service-worker.js
├── scripts
│   └── content-script.js 
├── popup/
│   ├── popup.css
│   ├── popup.js
│   └── popup.html
├── options/
│   ├── options.css
│   ├── options.js
│   └── options.html
└── icons/
    ├── 16.png
    ├── 32.png
    ├── 48.png
    └── 128.png

３つの主要機能​

Chrome extensionは、大きく分けて３つの機能を提供します。

３つの主要機能
  • コンテントスクリプト
  • ポップアップ
  • サービスワーカー

コンテントスクリプト​

コンテントスクリプトは、指定したウェブページにJavaScriptを適用する機能です。そのウェブページに<script>タグを挿入したように振る舞います。

マニフェストで以下のように指定します。

{
  ...
  content_scripts: [
    {
      "js": [
        "scripts/content-script.js"
      ],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ],
  ...
}

ポップアップ​

ポップアップは、ChromeのツールバーにあるExtensionのボタンをクリックした時に表示されるページです。 そのページはHTML, CSS, JavaScriptで記述します。

マニフェストで以下のように指定します。

{
  ...
  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },
  ...
}

サービスワーカー​

サービスワーカーはバックグラウンドで常に起動しているスレッドのようなものです。いろいろなイベントを処理するために使います。 コンテントスクリプトやポップアップとメッセージのやり取りをすることもできます。

マニフェストで以下のように指定します。

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

例えば、Extensionがインストールされた時のイベント処理を以下のように書きます。

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

また、表示中のタブを取得するには以下のように書きます。

async function getCurrentTab() {
  let queryOptions = { active: true, lastFocusedWindow: true };
  // `tab` will either be a `tabs.Tab` instance or `undefined`.
  let [tab] = await chrome.tabs.query(queryOptions);
  return tab;
}

メッセージ​

メッセージ機能は、コンテントスクリプトやポップアップやサービスワーカー間でデータをやり取りするために使うAPIです。

メッセージを送信する例​

(async () => {
  const response = await chrome.runtime.sendMessage({greeting: "hello"});
  // do something with response here, not outside the function
  console.log(response);
})();

メッセージを受信する例​

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting === "hello")
      sendResponse({farewell: "goodbye"});
  }
);

作成したExtensionをブラウザに取り込む方法​

公式ページのここにやり方が載っていますのでご参照ください。

上記を簡単にまとめると以下になります。

Extensionを追加する手順
  1. chrome://extensionsに行く
  2. Developer modeを有効にする
  3. Load unpackedをクリックする

API Reference​

API Reference

まとめ​

以上、Chrome Extensionの開発前に知っておきたい基礎知識をご紹介しました。