このページは Cloud Translation API によって翻訳されました。

アクティブなタブにスクリプトを挿入する

拡張機能のツールバーアイコンをクリックして、現在のページのスタイルを簡素化します。

概要

このチュートリアルでは、Chrome 拡張機能と Chrome ウェブストアのドキュメントページのスタイルを簡素化して読みやすくする拡張機能を作成します。

このガイドでは、次の操作を行う方法について説明します。

拡張機能サービスワーカーをイベントコーディネーターとして使用します。
"activeTab" 権限を使用してユーザーのプライバシーを保護する。
ユーザーが拡張機能ツールバーアイコンをクリックしたときにコードを実行します。
Scripting API を使用してスタイルシートを挿入、削除します。
キーボードショートカットを使用してコードを実行します。

始める前に

このガイドは、基本的なウェブ開発の経験があることを前提としています。拡張機能の開発ワークフローの概要については、Hello World をご覧ください。

拡張機能をビルドする

まず、拡張機能のファイルを格納する focus-mode という新しいディレクトリを作成します。必要に応じて、GitHub から完全なソースコードをダウンロードできます。

ステップ 1: 拡張機能のデータとアイコンを追加する

manifest.json という名前のファイルを作成し、次のコードを含めます。

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

これらのマニフェストキーの詳細については、拡張機能のmetadataとアイコンについて詳しく説明している「すべてのタブでスクリプトを実行する」チュートリアルをご覧ください。

images フォルダを作成し、そのフォルダにアイコンをダウンロードします。

ステップ 2: 拡張機能を初期化する

拡張機能は、拡張機能のサービスワーカーを使用して、バックグラウンドでブラウザイベントをモニタリングできます。サービスワーカーは、イベントを処理し、不要になったときに終了する特別な JavaScript 環境です。

まず、manifest.json ファイルに Service Worker を登録します。

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

background.js という名前のファイルを作成し、次のコードを追加します。

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

サービスワーカーが最初にリッスンするイベントは runtime.onInstalled() です。このメソッドを使用すると、拡張機能はインストール時に初期状態を設定したり、一部のタスクを完了したりできます。拡張機能は、Storage API と IndexedDB を使用してアプリケーションの状態を保存できます。この例では、2 つの状態のみを処理するため、アクションのバッチのテキスト自体を使用して、拡張機能が「オン」か「オフ」かをトラッキングします。

ステップ 3: 拡張機能のアクションを有効にする

拡張機能のアクションは、拡張機能のツールバーアイコンを制御します。そのため、ユーザーが拡張機能アイコンをクリックするたびに、（この例のように）コードが実行されるか、ポップアップが表示されます。次のコードを追加して、manifest.json ファイルで拡張機能のアクションを宣言します。

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

activeTab 権限を使用してユーザーのプライバシーを保護する

activeTab 権限により、拡張機能はアクティブなタブでコードを実行する一時的な権限を付与されます。また、現在のタブの機密性の高いプロパティにもアクセスできます。

この権限は、ユーザーが拡張機能を呼び出すと有効になります。この場合、ユーザーは拡張機能のアクションをクリックして拡張機能を呼び出します。

💡? 拡張機能で activeTab 権限を有効にするには、ユーザーが他にどのような操作を行う必要がありますか？

キーボードショートカットの組み合わせを押す。
コンテキストメニュー項目を選択している様子。
アドレスバーから候補を承認する。
拡張機能のポップアップを開く。

"activeTab" 権限を使用すると、ユーザーはフォーカスされているタブで拡張機能を実行することを意図的に選択できます。これにより、ユーザーのプライバシーが保護されます。また、権限に関する警告もトリガーされません。

"activeTab" 権限を使用するには、マニフェストの権限配列に追加します。

{
  ...
  "permissions": ["activeTab"],
  ...
}

ステップ 4: 現在のタブの状態を追跡する

ユーザーが拡張機能のアクションをクリックすると、拡張機能は URL がドキュメントページと一致しているかどうかを確認します。次に、現在のタブの状態を確認し、次の状態を設定します。background.js に次のコードを追加します。

const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

ステップ 5: スタイルシートを追加または削除する

次に、ページのレイアウトを変更します。focus-mode.css という名前のファイルを作成し、次のコードを追加します。

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

Scripting API を使用して、スタイルシートを挿入または削除します。まず、マニフェストで "scripting" 権限を宣言します。

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

最後に、background.js に次のコードを追加して、ページのレイアウトを変更します。

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡? Scripting API を使用して、スタイルシートではなくコードを挿入できますか？

はい。scripting.executeScript() を使用して JavaScript を挿入できます。

省略可: キーボードショートカットを割り当てる

フォーカスモードを簡単に有効または無効にできるように、ショートカットを追加することもできます。"commands" キーをマニフェストに追加します。

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

"_execute_action" キーは action.onClicked() イベントと同じコードを実行するため、追加のコードは必要ありません。

動作をテストする

プロジェクトのファイル構造が次のようになっていることを確認します。

フォーカスモードフォルダの内容: manifest.json、background.js、focus-mode.css、images フォルダ。

拡張機能をローカルに読み込む

デベロッパーモードで解凍された拡張機能を読み込むには、Hello World の手順に沿って操作します。

ドキュメントページで拡張機能をテストする

まず、次のいずれかのページを開きます。

次に、拡張機能のアクションをクリックします。キーボードショートカットを設定した場合は、Ctrl + B キーまたは Cmd + B キーを押してテストできます。

次のように変更します。

フォーカスモードの延長をオフにする — フォーカスモードの拡張機能が無効になっている

変更後:

🎯? 改善の可能性

本日の学習内容に基づいて、次のいずれかを試してください。

CSS スタイルシートを改善する。
別のキーボードショートカットを割り当てます。
お気に入りのブログやドキュメントサイトのレイアウトを変更する。

コミュニティを発展させ続けましょう。

このチュートリアルを完了しました。おめでとうございます 🎉?。このシリーズの他のチュートリアルを完了して、スキルをさらに磨きましょう。

広告表示オプション	学習内容
読み上げ時間	特定のページセットに要素を自動的に挿入する。
タブマネージャー	ブラウザのタブを管理するポップアップを作成する。

引き続き探求を

この Chrome 拡張機能の作成をお楽しみいただけたでしょうか。拡張機能の開発に関する学習を続けていただければ幸いです。次の学習パスをおすすめします。

デベロッパーガイドには、高度な拡張機能の作成に関連するドキュメントへのリンクが多数あります。
拡張機能は、オープンウェブで利用できる以上の強力な API にアクセスできます。Chrome APIs のドキュメントでは、各 API について説明しています。