Chrome 拡張機能の作成-jsチュートリアル-php.cn

Chrome 拡張機能の作成

WBOY

リリース： 2024-07-27 06:53:33

オリジナル

986 人が閲覧しました

Web ブラウジングを強化したい場合、反復的なタスクを自動化したい場合、または単に新しいことを学びたい場合でも、Chrome 拡張機能の作成は価値のある経験となる可能性があります。これは、2024 年に Chrome 拡張機能を作成する方法に関する包括的なガイドであり、前提条件、開発、展開、マーケティングの側面をカバーしています。

2024 年に Chrome 拡張機能を作成するためのステップバイステップガイド

前提条件

開発に入る前に、次のものが揃っていることを確認してください。

Web テクノロジーの基礎知識: HTML、CSS、JavaScript。
Chrome ブラウザ: 最新バージョンがインストールされていることを確認してください。
テキストエディターまたは IDE: VS Code、Sublime Text、または任意のエディター。
GitHub アカウント: コードのホスティングとバージョン管理用。

ステップ 1: プロジェクトのセットアップ

プロジェクトディレクトリを作成します:

   mkdir my-chrome-extension
   cd my-chrome-extension

ログイン後にコピー

必須ファイルの作成:
- manifest.json: これは拡張機能の構成ファイルです。

   {
     "manifest_version": 3,
     "name": "My First Chrome Extension",
     "version": "1.0",
     "description": "An example Chrome extension.",
     "permissions": ["activeTab"],
     "action": {
       "default_popup": "popup.html",
       "default_icon": {
         "16": "icons/icon16.png",
         "48": "icons/icon48.png",
         "128": "icons/icon128.png"
       }
     }
   }

ログイン後にコピー

popup.html: 拡張機能のポップアップの HTML ファイル。

   <!DOCTYPE html>
   <html>
   <head>
     <title>My Extension</title>
     <style>
       body { font-family: Arial, sans-serif; }
     </style>
   </head>
   <body>
     <h1>Hello, World!</h1>
     <script src="popup.js"></script>
   </body>
   </html>

ログイン後にコピー

popup.js: 拡張機能のロジック用の JavaScript ファイル。

   document.addEventListener('DOMContentLoaded', function () {
     console.log('Hello, World!');
   });

ログイン後にコピー

icons: アイコン画像 (icon16.png、icon48.png、icon128.png) を含むディレクトリ。

ステップ 2: 拡張機能の開発

機能の追加: 現在のタブを操作したり、他のタスクを実行したりできるように、popup.js を拡張します。
デバッグ: console.log ステートメントと Chrome デベロッパーツールを使用して、拡張機能をデバッグします。

ステップ 3: 拡張機能をテストする

解凍された拡張機能をロード:
- Chrome を開き、chrome://extensions/ に移動します。
- 「開発者モード」を有効にします。
- 「解凍してロード」をクリックし、プロジェクトディレクトリを選択します。
機能をテストする: Chrome ツールバーの拡張機能アイコンをクリックして、ポップアップとその機能をテストします。

ステップ 4: 導入の準備

コードの最適化: 不要なコメントを削除し、JavaScript と CSS ファイルを縮小します。
README を作成する: 拡張機能の機能、インストール手順、使用方法を文書化します。

ステップ 5: Chrome ウェブストアに公開する

拡張機能をパッケージ化します:
- プロジェクトファイルを圧縮します (.git ディレクトリなどの必須ではないファイルは除きます)。
- ZIP ファイルに、manifest.json、popup.html、popup.js、およびアイコンが含まれていることを確認してください。
Chrome ウェブストアデベロッパーとして登録:
- Chrome ウェブストアのデベロッパーダッシュボードに移動します。
- 1 回限りの登録料金をお支払いください。
拡張機能をアップロード:
- 「新しいアイテムを追加」をクリックし、ZIP ファイルをアップロードします。
- 必要な詳細 (タイトル、説明、スクリーンショットなど) を入力します。
- 審査のために拡張機能を送信してください。

ステップ 6: GitHub でコードをホスティングする

Git リポジトリを初期化します:

   git init
   git add .
   git commit -m "Initial commit"

ログイン後にコピー

GitHub にプッシュ:

   git remote add origin https://github.com/yourusername/my-chrome-extension.git
   git push -u origin main

ログイン後にコピー

GitHub リリースを作成します:
- GitHub 上のリポジトリに移動します。
- [リリース] > をクリックします。「新しいリリースの下書き」。
- リリースにタグを付けて (v1.0.0 など)、リリースノートを提供します。
- 拡張機能の ZIP ファイルを添付してください。

ステップ 7: 拡張機能をマーケティングする

ブログ投稿を書く: Dev.to、Medium、または個人のブログなどのプラットフォームで、あなたの体験や拡張機能の機能を共有します。
ソーシャルメディアで共有: 拡張機能についてツイートし、LinkedIn、Facebook、その他のプラットフォームで共有します。
拡張機能ディレクトリに送信: Chrome ウェブストア以外に、ExtensionWarehouse などの他のディレクトリに拡張機能をリストすることを検討してください。