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

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

概要

このチュートリアルでは、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 APIIndexedDB: アプリケーションの状態を保存します。ただし、今回は 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 を押してテストできます。

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

<ph type="x-smartling-placeholder">
</ph> フォーカス モード拡張機能 OFF <ph type="x-smartling-placeholder">
</ph> フォーカス モード拡張機能: オフ
をご覧ください。

変更後:

<ph type="x-smartling-placeholder">
</ph> フォーカス モード拡張機能オン <ph type="x-smartling-placeholder">
</ph> フォーカス モード拡張機能: オン
をご覧ください。

🙁? 潜在的な強化

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

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

構築を続けましょう。

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

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

引き続き探求を

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

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