Plasmo は、最新のブラウザプラグインを構築するためのフレームワークです。

Plasmoフレームワークは、すべての主要ブラウザをサポートするオープンソースのブラウザ拡張SDKです。設定ファイルの記述やブラウザ拡張機能開発の複雑な機能を気にすることなく、プラグインを作成できます。Plasmoは、根本的な違いから身を守るのに役立ちます。

Plasmo を使用するには、まず次のシステム要件を満たしている必要があります。

次に、次のコマンドを使用してプロジェクトを初期化します。

 pnpm dlx plasmo 初期化
#またはnpm v7を使用する
npm x plasmo 初期化

名前の提案をスキップするには、位置パラメータとして名前を直接指定できます。

 pnpm dlx plasmo init 「私の素晴らしい拡張機能」
 # またはnpm v7
 npm x plasmo init 「私の素晴らしい拡張機能」

上記のコマンドは、単純な構造を持つ非常にシンプルな Plasmo ブラウザプラグインプロジェクトを作成します。

これらのファイルの目的は次のとおりです。

ファイル名	説明する
ポップアップ.tsx	このファイルはデフォルトのReactコンポーネントをエクスポートし、ポップアップにレンダリングされます。プラグインのポップアップに必要なのはこれだけです！
資産	Plasmo はいくつかの小さなアイコンを自動的に生成し、icon512.png ファイルからマニフェストに構成します。
パッケージ.json	日常生活で使用されるNode.jsプロジェクトのメタデータ宣言
.prettierrc.cjs	構成コードのフォーマット
.gitignore	git 無視ファイル
リードミー	READMEファイル
tsconfig.json	TypeScript設定ファイル

リアルタイムリロードをサポートする開発バージョンをビルドできます。

 pnpm 開発

これにより、build/chrome-mv3-dev に拡張機能のビルドが作成されます。製品版をビルドするには、次のコマンドを使用します。

 pnpm ビルド

これにより、build/chrome-mv3-prod に拡張機能の製品版が作成されます。または、ビルドコマンドに --zip フラグを指定して、オンラインストアにアップロード可能な zip パッケージを作成することもできます。

 pnpm ビルド-- --zip
 ＃ または
npm 実行ビルド--- zip
 ＃ または
プラズマビルド--zip

ビルドが完了したら、Chromeブラウザでプラグインを読み込むことができます。まず、chrome://extensions にアクセスし、開発者モードを有効にしてください。

次に、「Load Unpacked」をクリックし、拡張機能の build/chrome-mv3-dev (または build/chrome-mv3-prod) ディレクトリに移動してプラグインをロードします。

ポップアップを表示するには、Chromeツールバーのピンアイコンをクリックし、拡張機能をクリックします。拡張機能をChromeツールバーにピン留めすると、アクセスしやすくなります。

Plasmoの使い方について詳しくは、https://docs.plasmo.com/workflows にあるワークフロードキュメントをご覧ください。各ワークフローにはモジュール式のサンプルが付属しており、GitHubリポジトリにも対応するサンプルコードがあります。

Git リポジトリ: https://github.com/PlasmoHQ/plasmo。

DUICUO