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

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

拡張機能ツールバーアイコンをクリックすると、現在のページのスタイルをシンプルにする。

概要

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

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

拡張機能 Service Worker をイベントコーディネーターとして使用する。
"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"
  }
}

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

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

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

拡張機能は、拡張機能のサービスを使用して、バックグラウンドでブラウザイベントをモニタリングできます。 worker になります。Service Worker は、特殊な JavaScript 環境で、不要な場合は終了します。

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

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

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

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

Service Worker が最初にリッスンするイベントは、 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 権限により、拡張機能にコードを実行するための一時的な権限が付与されます。クリックします。また、Google Cloud プロジェクト内で機密性の高いクリックします。

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

💡? 他にどのようなユーザー操作によって自分の拡張機能で 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 を押してテストできます。

次のようになっているはずです。

フォーカスモード拡張機能 OFF — </ph> フォーカスモード拡張機能: オフ

変更後:

🙁? 潜在的な強化

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

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

構築を続けましょう。

以上でこのチュートリアルは終了です 🎉?。他のコースを修了してスキルをレベルアップさせましょうこのシリーズのチュートリアル:

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

引き続き探求を

この Chrome 拡張機能がお役に立てば幸いです。今後も拡張機能の開発を続けていきます。学びます。次の学習プログラムをおすすめします。

デベロッパーガイドには、ドキュメントへの多数のリンクが追加で記載されています。高度な拡張機能の作成に関連する質問です
拡張機能では、オープンウェブで利用できるものを超えた強力な API にアクセスできます。 Chrome API のドキュメントでは、各 API について説明しています。