> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Chrome/Edge 拡張機能に Mellowtel を統合する

ここでは、Chrome/Edge 拡張機能プロジェクトに Mellowtel ライブラリを実装する方法を紹介します。

完了までの推定時間: 5-7 分。

# ブラウザポリシーへの準拠

Mellowtel は、統合がユーザーの選択と設定を尊重する場合、ブラウザポリシーに準拠しています。

公式の Mellowtel プラグインは Chrome と Edge で利用可能です。近いうちに他の主要なブラウザにも提出する予定です。

Chrome: [https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc](https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc)

Edge: [https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi](https://microsoftedge.microsoft.com/addons/detail/support-with-mellowtel/chpomjnojnimgcaomhmcmfgjinfoekhi)

Chrome では、一部の開発者が単一目的ポリシーに関する問題に直面することがあります。このポリシーは、プラグインが明確に述べられた 1 つの機能のみを持つことを要求します（ただし、多機能拡張機能では一貫性なく解釈されることがよくあります）。
そのような場合、開発者は個人リンクを共有し、ユーザーに公式の Mellowtel Chrome プラグインをインストールするよう依頼することをお勧めします。このプラグインは、ユーザーがアイドルリソースを共有することによって開発者をサポートすることを目的としています。
開発者は [Mellowtel ダッシュボード](https://www.mellowtel.com/dashboard/support-with-mellowtel) からリンクを作成し、公式の [Mellowtel Chrome プラグイン](https://chromewebstore.google.com/detail/support-with-mellowtel/jngbedjpioeongcicaomeideeompcbcc) にユーザーをリダイレクトできます。

代わりに、AI 帯域幅共有スペースで動作する Chrome プラグインを持っていて、それがプラグインの単一の目的である場合、Mellowtel を直接プラグインに統合できます。

一方、Edge、Firefox、または Safari にはこのポリシーがないため、開発者はライブラリを製品に直接統合し、ユーザーにサポートするかどうかを尋ね、いつでもプラグイン自体から設定を簡単に変更できる方法を提供することができます。

# 推奨ブラウザ

現時点では、Mellowtel を Edge プラグインに統合することをお勧めします。Firefox と Safari バージョンのライブラリの最適化にまだ取り組んでいるためです。

# 要件

始める前に、次のことを確認してください:

1. プラグインが [Manifest V3](https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3) を使用していること。
2. コードが Webpack、Rollup、または他のバンドラーを使用してコンパイルされた方法で整理されていること。
   バンドラーが設定されていない場合は、まず [こちら](/browser-plugins/static-to-webpack) のガイドに従ってください。

# npm パッケージのインストール

npm パッケージをインストールするには、ターミナルで次のコマンドを実行します:

```npm theme={null}
npm install mellowtel
```

<Accordion title="Yarn">
  パッケージマネージャーとして yarn を使用している場合は、次のコマンドを実行できます:

  ```yarn theme={null}
  yarn add mellowtel
  ```
</Accordion>

# 実装方法を決定する

拡張機能にライブラリを実装する方法は 2 つあります。

Web ストアで初めて拡張機能をリリースする場合は、オプション 1 に従ってください。
すでに Web ストアで拡張機能を公開している場合は、「どのように決定するか」をお読みください。

### どのように決定するか？

Web ストアから拡張機能をインストールすると、「すべてのウェブサイトでデータを読み取り、変更する」権限を求める警告ウィンドウが表示されますか？

このように表示されます:

<Frame caption="すべてのウェブサイトでデータを読み取り、変更する権限を求める警告ウィンドウ">
  <img src="https://mintcdn.com/mellowtel/-NaMUO-H7VMwBlS7/images/alert_web_store.png?fit=max&auto=format&n=-NaMUO-H7VMwBlS7&q=85&s=c26c3ab1b347d62e376b28ec4c0766a7" width="898" height="282" data-path="images/alert_web_store.png" />
</Frame>

もし表示される場合は、オプション 1 に従ってください。表示されない場合は、オプション 2 に従う必要があります。

# オプション 1

Web ストアで初めて拡張機能をリリースする場合、またはすべてのウェブサイトで操作する権限を求める拡張機能にライブラリをインポートする場合は、オプション 1 に従うことができます。

### マニフェストを設定する

[manifest.json](https://developer.chrome.com/docs/extensions/reference/manifest) ファイルで、`permissions` と `host_permissions` セクションを次のように変更します:

```json theme={null}
{

  "permissions": [
    "storage",
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "\u003Call_urls\u003E"
  ]

}
```

### サービスワーカー（バックグラウンドスクリプト）を設定する

[サービスワーカー](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers) ファイルで、`mellowtel` パッケージをインポートする必要があります。
注意: サービスワーカーは `background script` とも呼ばれます。

次のコードをコピーしてサービスワーカーファイルに貼り付け、`configuration_key` を自分のキーに変更します。

```javascript theme={null}
import Mellowtel from "mellowtel";

let mellowtel;

(async () => {
    mellowtel = new Mellowtel("<configuration_key>"); // 自分の設定キーに置き換えてください
    await mellowtel.initBackground();
})();
```

<Accordion title="サービスワーカーコードの内訳">
  mellowtel パッケージをインポートする

  ```javascript theme={null}
      import Mellowtel from "mellowtel";
  ```

  その後、`Mellowtel(configuration_key, options?)` を使用して Mellowtel オブジェクトの新しいインスタンスを作成できます。Mellowtel オブジェクトは Mellowtel の SDK へのエントリーポイントです。この関数を呼び出す際には `configuration_key` が必要であり、これは Mellowtel に対する拡張機能を識別します。`configuration_key` は [ダッシュボード](https://www.mellowtel.com/mellowtel-dashboard/#home) で見つけることができます。

  ```javascript theme={null}
  mellowtel = new Mellowtel("<configuration_key>");
  ```

  `initBackground` メソッドを呼び出して Mellowtel を初期化します。このメソッドは Mellowtel オブジェクトを初期化し、必要なリスナーを設定します。

  ```javascript theme={null}
  await mellowtel.initBackground();
  ```
</Accordion>

### コンテントスクリプトを設定する

[コンテントスクリプト](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) にも mellowtel パッケージをインポートする必要があります。

このコンテントスクリプトは `all_frames` と `<all_urls>` で `document_start` に実行される必要があります。

新しいコンテントスクリプト（例: content\_start\_mellowtel.js）を作成し、次のコードをコピーして貼り付けることをお勧めします。
`configuration_key` を自分のキーに変更します。

```javascript theme={null}
import Mellowtel from "mellowtel";

(async () => {
    const mellowtel = new Mellowtel("<configuration_key>"); // 自分の設定キーに置き換えてください
    await mellowtel.initContentScript();
})();
```

次に、このコンテントスクリプトを `manifest.json` ファイルの content\_scripts セクションに、すでにある他のコンテントスクリプトと一緒に追加することを忘れないでください。
`name_of_your_content_script.js` を選んだ名前に変更して、次のコードをコピーして貼り付けることができます。

```json theme={null}
{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["<name_of_your_content_script.js>"], // <-- ここをコンテントスクリプトの名前に変更
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}
```

### オプトイン/オプトアウトロジックを設定する

Mellowtel を有効にするには、ユーザーがサービスに明示的にオプトインする必要があります。

オプトイン/オプトアウトロジックを実装する方法は 2 つあります:

1. Mellowtel が提供する事前構築されたページを使用した推奨実装を使用する。

2. 独自のカスタムオプトイン/オプトアウト要素を作成し、[こちら](https://docs.mellowtel.com/concepts/opt-in-out#2-custom-elements) に示されている方法を使用する。

<Info>
  独自のオプトイン/オプトアウト要素を作成することを選択した場合は、<a href="/mellowtel-elements/quickstart" target="_blank">**Mellowtel Elements**</a> を使用することを検討してください。これは、最小限の統合努力でユーザーの同意と設定を処理する事前構築された UI コンポーネントです。
</Info>

推奨実装を使用する場合は、`service worker` ファイル（バックグラウンドスクリプトとも呼ばれる）を開き、次のコードを追加します:

```javascript theme={null}
chrome.runtime.onInstalled.addListener(async function(details) {
    console.log("拡張機能がインストールまたは更新されました");
    // 初回インストールと更新を異なる方法で処理したい場合
    /**
    if(details.reason === "install"){
        // 初回インストールを処理する関数を呼び出す
    } else if(details.reason === "update") {
        // 更新を処理する関数を呼び出す
    }
    **/
    await mellowtel.generateAndOpenOptInLink();
});
```

### 設定リンクを生成する

ユーザーが帯域幅を完全に制御できるようにするために、いつでも設定を変更できる簡単にアクセス可能な方法を残すことが求められます。

`generateSettingsLink()` メソッドを使用してリンクを生成できます。
このメソッドは、ユーザーがいつでもオプトインまたはオプトアウトするかを決定できる Mellowtel 設定ページを開くリンクを返します。

このリンクは、ポップアップ、オプションページ、またはユーザーが簡単にアクセスできる他の場所に配置する必要があります。

例えば、次のように `openSettings()` 関数内に配置できます。ボタンクリックや他の関連イベントで `openSettings()` を呼び出すことができます:

```javascript theme={null}
async function openSettings() {
    try {
        // 設定リンクを生成して管理する
        const settingsLink = await mellowtel.generateSettingsLink();
        // デバッグ用に生成されたリンクをログに記録する
        console.log("生成された設定リンク:", settingsLink);
        // このリンクをポップアップ、オプションページ、または任意の UI 要素内で使用できます
    } catch (error) {
        console.error("設定リンクの生成中にエラーが発生しました:", error);
    }
}
```

完璧です！これで拡張機能を Web ストアに送信する準備が整いました。[拡張機能を提出する方法](/browser-plugins/submit-to-chrome-store) を見るためにこちらのガイドに従ってください。

# オプション 2

<Warning>オプション 2 は、正しく実装されないと拡張機能を無効にする可能性があります。そのため、すべてのユーザーに利用可能ではありません </Warning>

オプション 1 を実装できない場合は、[Discord](https://discord.com/invite/txAZp4MSDe) でお問い合わせください。