Chrome拡張の作り方

Chrome拡張機能の概要

Chrome拡張機能は、ブラウザのユーザーインターフェースをカスタマイズし、ブラウザのイベントを監視し、Webページの内容を変更するためのツールです。拡張機能は、HTML、CSS、JavaScriptなどのWeb開発技術を使用して構築できます。

公式リソース

Chrome拡張機能の公式ドキュメントには、以下のような情報が含まれています:

基本構造の設定

基本フォルダ構造の作成:

  • 新しいフォルダを作成し、そこに拡張機能のファイルを配置します。
  • index.htmlstyle.css、および script.jsファイルを作成します。これらはそれぞれ拡張機能のポップアップインターフェイス、スタイリング、および機能を定義します。

マニフェストファイルの作成

  • manifest.jsonファイルは拡張機能のプロパティを定義する重要なファイルです。基本的な例を以下に示します:
{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple Chrome extension",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["storage"]
}
  • このファイルを拡張機能のルートディレクトリに配置します。これはバージョン、名前、必要な権限などを指定します。

アプリケーションの構築:

  • index.htmlファイルにはポップアップの基本HTML構造を含めます:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Extension</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, Chrome Extension!</h1>
    <script src="script.js"></script>
</body>
</html>

JavaScriptで機能を追加:

  • script.jsファイルに必要な機能を記述します。例えば、DOMを操作したり、データを取得するためのコードを記述します:
document.addEventListener('DOMContentLoaded', function() {
    // ここにコードを追加
});

拡張機能を読み込み、テスト:

  • Chromeを開き、chrome://extensionsに移動します。
  • 右上の「デベロッパーモード」を有効にします。
  • 「パッケージ化されていない拡張機能を読み込む」をクリックし、拡張機能のディレクトリを選択します。
  • リストに拡張機能が表示され、アイコンをクリックするとポップアップが表示されます。

デバッグ:

  • Chrome DevToolsを使用して拡張機能をデバッグできます。拡張機能のアイコンを右クリックし、「ポップアップを検査」を選択します

Chromeウェブストアへの公開:

  • 拡張機能が完成したら、Chromeウェブストアに公開できます。開発者アカウントを作成し、拡張機能をアップロードして提出する手順を踏みます。一度だけ登録料がかかります​

開発環境構築

https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f

上記を参考にNode.jsをインストール

$ brew -v
Homebrew 4.3.1
$ brew install anyenv
$ anyenv init
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
$ exec $SHELL -l
$ anyenv install --init
$ anyenv install nodenv
$ exec $SHELL -l
$ env
$ nodenv install -l
18.20.3
20.15.0
22.3.0
graal+ce-19.2.1
graal+ce_java11-20.0.0
graal+ce_java8-20.0.0
$ nodenv install 22.3.0
$ cd {フォルダ名}
$ nodenv local 22.3.0
$ cat .node-version 
22.3.0

TypeScriptインストール

$ npm install -g typescript
$ exec $SHELL -l
$ tsc --version                                                                                                                                                                                                                                  
Version 5.5.2

VSCode環境構築

  • アイコン
    • アイコンは配布するなら必須です
  • コンテンツ スクリプト
    • ページのコンテンツを読み取って変更するためのスクリプトです

content_scripts

すべてのページでスクリプトを実行するには、content_scriptsで、スクリプトと、実行するサイトを指定します。

{
    "manifest_version": 3,
    "name": "Reading time",
    "version": "1.0",
    "description": "Add the reading time to Chrome Extension documentation articles",
    "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.js"],
          "matches": [
            "https://developer.chrome.com/docs/extensions/*",
            "https://developer.chrome.com/docs/webstore/*"
          ]
        }
    ]
}

バックグラウンドインベントのモニター

Chrome拡張機能において、バックグラウンドイベントのモニターは以下のような場合に使用されます:

  1. 長時間の動作が必要な場合
    • 定期的なタスクの実行や、一定間隔で更新する必要があるデータの取得など、長時間にわたって動作させる必要がある場合にバックグラウンドスクリプトが役立ちます。
  2. ユーザーのインタラクションが不要な処理
    • ユーザーの操作に依存せずに実行される処理(例えば、通知の表示、ブラウジングデータの監視、バックグラウンドでのデータ同期など)に適しています。
  3. イベントリスニング
    • 特定のブラウザイベント(例えば、ブラウザ起動時、タブの更新時、アラームの発火時など)を監視し、それに対応したアクションを実行するために使用されます。
  4. ブラウザAPIの使用
    • Webリクエストの監視、ブックマークの操作、ブラウジング履歴の管理など、ブラウザ固有のAPIを使用する処理は、バックグラウンドスクリプトで行うことが一般的です。
  5. 状態の保存と共有
    • 拡張機能の状態や設定を保存し、それを他のコンポーネント(例えば、コンテンツスクリプトやポップアップ)と共有する場合に利用されます。
  6. 複数コンポーネント間のメッセージング
    • コンテンツスクリプト、ポップアップ、オプションページなどとメッセージをやり取りするためのハブとして機能します。

Service Worker

Chrome拡張機能において、Service Worker(サービスワーカー)は、バックグラウンドでの処理を効率的に行うためのスクリプトで、従来のバックグラウンドページの代替として使用されます。以下に、Service Workerについての詳細を説明します。

Service Workerの特徴

  1. イベント駆動
    • Service Workerはイベント駆動型で、特定のイベントが発生したときにのみ起動します。イベントがないときは停止しており、リソースを節約します。
  2. 持続性の低さ
    • Service Workerは一時的で、イベントが処理されると自動的に停止します。これにより、メモリ使用量が低く抑えられます。
  3. バックグラウンドタスクの処理
    • アラーム、通知、ネットワーク要求のインターセプトなど、バックグラウンドでの処理に適しています。
  4. メッセージング
    • Service Workerは、拡張機能の他の部分(例えば、コンテンツスクリプト、ポップアップ、オプションページ)とメッセージを交換することができます。

基本的なService Workerの例

以下は、Chrome拡張機能でService Workerを使用する基本的な例です。

マニフェストファイル(manifest.json)

{
  "name": "Sample Extension",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["alarms", "notifications"],
  "action": {
    "default_popup": "popup.html"
  }
}

バックグラウンドスクリプト(background.js)

// アラームの作成
chrome.alarms.create('periodicAlarm', { periodInMinutes: 1 });

// アラームイベントリスナー
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'periodicAlarm') {
    console.log('アラームが発火しました');
    // 必要に応じて追加の処理を行う
  }
});

// メッセージリスナー
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'GREETING') {
    sendResponse({ greeting: 'こんにちは、Service Workerからのメッセージです!' });
  }
});

Service Workerのユースケース

  1. 定期タスクの実行
    • 定期的なデータの取得やバックグラウンド処理の実行。
  2. 通知の表示
    • 特定の条件が満たされたときにユーザーに通知を表示。
  3. ネットワークリクエストのキャプチャ
    • フィルタリングやカスタマイズのためにネットワークリクエストをインターセプト。
  4. データの同期
    • バックグラウンドでのデータの同期や更新。
  5. イベントの監視
    • ブラウザイベント(タブの更新、インストール、アンインストールなど)の監視と処理。

Service Workerは、バックグラウンド処理を効率的に行うための強力なツールであり、リソース消費を抑えつつ、様々なタスクを実行するのに適しています。

新しいタブでプラグイン用の設定画面を開く

タブを開く場合と同じ。指定するURLを、プラグインのファイル名にすれば良い。

// 拡張機能のボタンをクリックした際にアクティブなタブのURLを取得し、新しいタブで detail.html を開きます。
chrome.action.onClicked.addListener((tab) => {
    // アクティブなタブのURLを取得して保存
    const activeTabUrl = tab.url;
    chrome.storage.local.set({ currentTabUrl: activeTabUrl }, () => {
        // detail.htmlを新しいタブで開く
        chrome.tabs.create({ url: 'detail.html' });
    });
});

Chrome拡張の公開ーChrome ウェブストアで公開する

Chrome Web Storeへの公開に関するガイドラインについてのページは、Chrome拡張機能やテーマを公開するための手順や要件を説明しています。以下にその内容をわかりやすく解説します。

1. デベロッパー アカウントの作成

Chrome Web Storeに公開するには、まずデベロッパー アカウントを作成する必要があります。Googleアカウントでログインし、デベロッパー登録を行います。登録料(現時点では$5)が必要です。

2. 拡張機能またはテーマの準備

公開する拡張機能やテーマは、特定のフォルダ構造やファイル形式に従う必要があります。通常は、次のようなファイルが含まれます:

  • manifest.json: 拡張機能の基本情報や権限を定義するファイル
    • name:機能拡張の名前
    • version:機能拡張のバージョン。 バージョン番号は、major.minor.patchの形式に従うことが一般的です。ここで、majorは主要な変更(互換性のない変更)を、minorは小さな機能追加や改善を、patchはバグ修正などの小さな変更を示します。
  • JavaScriptファイルやHTMLファイル: 拡張機能の機能を実装するファイル
  • アイコン画像ファイル: Chrome Web Storeやブラウザに表示されるアイコン

機能拡張のフォルダが完成したら、ファイルを圧縮します。マニフェスト ファイルはフォルダではなくルート ディレクトリに置きます。

zip -r extension.zip /path/to/your/extension/*

3. Chrome Web Storeへのアップロード

  1. デベロッパー ダッシュボードにログインします。
  2. 新しいアイテムを追加し、zip形式でパッケージ化した拡張機能またはテーマをアップロードします。
  3. 必要な情報(タイトル、説明、スクリーンショット、プロモーション画像など)を入力します。

4. 公開とレビュー

アップロードしたアイテムは、Googleによるレビューを受けます。これには、コンテンツの確認や権限のチェックなどが含まれます。レビューが完了し、承認されると、Chrome Web Storeに公開されます。

5. ポリシーの遵守

Chrome Web Storeのポリシーを遵守することが重要です。不適切なコンテンツやスパム行為が検出されると、拡張機能が削除される可能性があります。ポリシーには、プライバシー、セキュリティ、パフォーマンスに関するガイドラインが含まれます。

6. アイテムの管理と更新

公開後も、デベロッパー ダッシュボードを使用して拡張機能やテーマを管理および更新できます。バグ修正や新機能の追加などがある場合は、更新版をアップロードし、再度レビューを受けます。

このように、Chrome Web Storeで拡張機能やテーマを公開するためには、デベロッパー アカウントの作成から始まり、必要なファイルの準備、アップロード、レビュー、ポリシーの遵守、そして継続的な管理と更新が必要です。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

上部へスクロール