Mellowtel Pascoli モジュールブラウザプラグインガイド

この機能はMellowtelバージョン1.6.2以上が必要です。以前のバージョンと比べて互換性がありません。

Mellowtelは、より多くのリクエストを処理し、したがってより多くの収入を得ることができるオプション機能を提供しています。この機能は「Pascoli」と呼ばれています。

インストール

まず、お好みのパッケージマネージャーを使用して必要なnpmパッケージをインストールします:

npmを使用する場合

npm install @mellowtel/module-pascoli

yarnを使用する場合

yarn add @mellowtel/module-pascoli

pnpmを使用する場合

pnpm add @mellowtel/module-pascoli

以下は、標準およびPlasmoフレームワークの実装オプションを含む、ブラウザプラグインでPascoli機能を有効にする手順です。

標準実装

1. `pascoli.html`という名前のHTMLファイルを作成する

pascoli.htmlという名前のファイルを作成し、以下のコードを追加します。このファイルが最終ビルド（/dist）ディレクトリに含まれるようにしてください。初期のwebpack設定セットアップに従った場合、このファイルをpublicディレクトリにpascoli.htmlとして追加するだけで済みます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" />
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: transparent;
        }
    </style>
    <script type="module" crossorigin src="/pascoli.js"></script>
</head>
<body>
</body>
</html>

スクリプトタグのsrc属性を、最終ビルドでのpascoli.jsファイルの正しい場所を指すように変更することを忘れないでください

2. `pascoli.js`という名前のJavaScriptファイルを作成する

srcディレクトリ、またはjsファイルがある場所にpascoli.jsという名前のファイルを作成し、以下のコードを追加します。このファイルが最終ビルド（/dist）ディレクトリに含まれるようにしてください。初期のwebpack設定セットアップに従った場合、このファイルをwebpack設定のentryオブジェクトに追加するだけで済みます。

import ModulePascoli from "@mellowtel/module-pascoli";

let modulePascoli;

(async () => {
    modulePascoli = new ModulePascoli();
    await modulePascoli.init();
})();

3. webpack設定を更新する

最終ビルドディレクトリにpascoli.htmlとpascoli.jsファイルが含まれるようにしてください。 pascoli.jsがビルドに含まれるようにするために、以下をwebpack設定に追加します:

module.exports = {
    mode: 'development', // 本番ビルドの場合は 'production' を使用
    entry: {
        // background: path.join(__dirname, 'src', 'background.js'),
        // popup: path.join(__dirname, 'src', 'popup.js'),
        // content_script: path.join(__dirname, 'src', 'content_script.js'), ...
        pascoli: path.join(__dirname, 'src', 'pascoli.js'),
    },
    // ...
}

pascoli.htmlは、初期のwebpack設定セットアップに従いpublicディレクトリに追加した場合、自動的にビルドディレクトリに含まれるはずです。

4. manifest.jsonを更新する

manifest.jsonにpascoli.htmlファイルをweb_accessible_resourcesとして追加します:

{
  "web_accessible_resources": [
    {
      "resources": [
        "pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

Plasmoフレームワーク実装

Plasmoフレームワークを使用している場合、以下の代替手順に従ってください:

1. PascoliPageコンポーネントを作成する

tabsディレクトリにpascoli.tsxという名前のファイルを作成します。tabsディレクトリがない場合は作成してください。Plasmoフレームワークのtabsに関する詳細はこちらをご覧ください。以下のコードをpascoli.tsxファイルに追加します:

import { useEffect } from "react"
import ModulePascoli from "@mellowtel/module-pascoli"

function PascoliPage() {
    useEffect(() => {
        const initPascoli = async () => {
            const modulePascoli = new ModulePascoli();
            await modulePascoli.init();
        }

        initPascoli().catch(console.error)
    }, [])

    return (
        <div
            style={{
                padding: 0,
                margin: 0,
                height: "100vh",
                width: "100vw",
                overflow: "hidden",
                backgroundColor: "transparent"
            }}>
        </div>
    )
}

export default PascoliPage

2. Plasmo用にpackage.jsonを更新する

package.jsonファイルに以下を追加します:

{
  "web_accessible_resources": [
    {
      "resources": [
        "tabs/pascoli.html"
      ],
      "matches": [ "<all_urls>" ]
    }
  ]
}

initContentScriptを更新する

両方の実装において、content script内のinitContentScriptメソッドを修正し、Pascoliファイルへの正しいパスを含めます:

// 標準実装の場合
await initContentScript({
    pascoliFilePath: "pascoli.html"
});

Plasmoフレームワークの場合、以下を使用できます:

// Plasmoフレームワークの場合
await initContentScript({
    pascoliFilePath: "tabs/pascoli.html"
});

​インストール

​npmを使用する場合

​yarnを使用する場合

​pnpmを使用する場合

​標準実装

​1. pascoli.htmlという名前のHTMLファイルを作成する

​2. pascoli.jsという名前のJavaScriptファイルを作成する

​3. webpack設定を更新する

​4. manifest.jsonを更新する

​Plasmoフレームワーク実装

​1. PascoliPageコンポーネントを作成する

​2. Plasmo用にpackage.jsonを更新する

​initContentScriptを更新する

インストール

npmを使用する場合

yarnを使用する場合

pnpmを使用する場合

標準実装

1. `pascoli.html`という名前のHTMLファイルを作成する

2. `pascoli.js`という名前のJavaScriptファイルを作成する

3. webpack設定を更新する

4. manifest.jsonを更新する

Plasmoフレームワーク実装

1. PascoliPageコンポーネントを作成する

2. Plasmo用にpackage.jsonを更新する

initContentScriptを更新する