Vite、Vue、Manifest V3 でブラウザ拡張機能の開発を開始しましょう

Vite、Vue 3、Manifest V3 でブラウザ拡張機能の開発を開始しましょう

最新の Web テクノロジーを使用してブラウザ拡張機能の構築を開始するための迅速かつ効率的な方法をお探しですか? Vite を利用した WebExtension スターター テンプレート をご紹介します!このテンプレートは、Vue 3、Vite、Manifest V3 を組み合わせて開発プロセスを合理化するように設計されており、Chrome、Firefox 用の強力で効率的な拡張機能を作成できます。 、その他のブラウザ。

なぜこのテンプレートなのか?

ブラウザ拡張機能を最初から構築するのは、特に Vue 3 や Vite などの最新テクノロジーを活用したい場合には、困難な作業になる可能性があります。私たちのテンプレートには重要な機能があらかじめ詰め込まれているため、環境をセットアップするのではなく拡張機能の開発に集中しやすくなります。

主な特長

• Vue 3 構成 API: 構成 API と を使用して Vue 3 の能力を最大限に活用します。
• HMR (ホット モジュール交換): 拡張ページとコンテンツ スクリプトの HMR サポートにより、すぐにフィードバックを得ることができます。
• Tailwind CSS と daisyUI: daisyUI コンポーネントによって強化された Tailwind CSS を使用して、拡張機能を簡単にスタイル設定できます。
• TypeScript: TypeScript の完全なサポートによるタイプセーフな開発体験をお楽しみください。
• 自動ビルド プロセス: GitHub Actions を使用して拡張機能を簡単にビルドしてリリースします。
• Webext-Bridge: Webext-Bridge を使用してコンテキスト間の通信を簡素化します。

全機能リスト

• Vue DevTools サポート: 拡張ページとコンテンツ スクリプトで Vue アプリケーションをデバッグします。
• Vue Router: unplugin-vue-router による自動ルート登録。
• 自動インポートされたコンポーネント: unplugin-vue-components と unplugin-icons を使用してコンポーネントとアイコンを自動的にインポートします。
• 事前設定された ESLint と Prettier: Vue、JavaScript、TypeScript 用に事前設定された ESLint と Prettier を使用してコードの品質を維持します。
• UI フレームワーク: タイポグラフィー、フォームなどに Tailwind CSS プラグインを利用します。
• マルチブラウザのサポート: Chrome、Firefox、およびその他の Chromium ベースのブラウザを特定の構成でビルドします。

使用上の注意

クローンを作成して始めましょう

まず、テンプレートを複製します。

pnpx degit mubaidr/vite-vue3-browser-extension-v3 my-webext
cd my-webext
pnpm i

プロジェクトの構造

テンプレートは簡単にナビゲーションできるように構成されています:

• src: メインソースディレクトリ。
• content-script: コンテンツ スクリプトのスクリプトとコンポーネント。
• background: バックグラウンド スクリプト。
• ポップアップ: Vue.js アプリケーションをポップアップします。
• オプション: Vue.js アプリケーションのオプション。
• セットアップ: インストールおよび更新イベントのページ。
• オフスクリーン: オーディオや画面録画などの高度な機能のためのオフスクリーン ページ。
• コンポーネント: 共有 Vue コンポーネント。

開発と構築

開発サーバーを起動するには:

pnpm dev

実稼働用の拡張機能をビルドするには:

pnpm build

ブラウザの設定

• manifest.config.ts: 基本拡張マニフェスト。
• vite.config.ts: Vite の基本構成。

貢献してフィードバックを提供する

私たちはこのテンプレートの改善に常に取り組んでおり、皆様からのフィードバックは非常に貴重です。フィードバック フォームにご記入いただき、どのような機能をご希望か、またはテンプレートの準備ができたら購入することに興味があるかどうかをお知らせください。あなたの回答がこのプロジェクトの将来を形作ります。

最終的な考え

この Vite Vue 3 WebExtension テンプレートは、開発エクスペリエンスをスムーズかつ効率的にするように設計されています。単純なユーティリティを構築する場合でも、複雑な拡張機能を構築する場合でも、このテンプレートで対応できます。試してみて、ご意見をお聞かせください!

コーディングを楽しんでください!

以上がVite、Vue、Manifest V3 でブラウザ拡張機能の開発を開始しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。