Chrome拡張機能について

Chrome拡張機能の概要

Chrome拡張機能は、ユーザーのブラウジング体験をカスタマイズするための小さなソフトウェアプログラムです。

これによって、ブラウザに新しい機能を追加したり、既存の機能を強化したりすることができます。

おそらく、Ad BlockerやAdobe Reader、JSON Viewerなどの拡張機能をすでにみたことがあると思います。これらすべての拡張機能は、ブラウザと連携して動作します。

拡張機能は、Chrome Webストアで探すことができます。そこでは、多くの拡張機能やアイデアを閲覧することができ、ブラウザの機能を拡張することができます。

拡張機能は、HTML、JavaScript、CSSで構築されており、特別な魔法はありません。拡張機能開発のアイデアは、これらの異なる技術が拡張機能の目的を達成するために注力することです。

拡張機能には複数のコンポーネントが含まれる場合がありますが、すべてが同じ目標に貢献する必要があります。

拡張機能は主に4つの異なるタイプまたは4つの異なるコンポーネントで構成されています。

拡張機能または最終的なファイルは、Chrome Webストアに提出されるバンドルです。これにはすべてのHTML、CSS、JavaScript、および必要な場合は画像が含まれており、それらは”.crx”ファイルに圧縮されてユーザーがダウンロードしてインストールします。

拡張機能は開発者ダッシュボードを通じて配布し、必要に応じてChrome Webストアに公開します。

必要なソフトウェアのインストール
プロジェクトのセットアップを始めましょう。そのためには、Node.jsをインストールする必要があります。

Node.jsの最新バージョンを取得するには、nodejs.orgにアクセスしてください。インストールが完了すると、NPMパッケージマネージャーも自動的にインストールされます。このコースでは、NPMを使用します。

また、統合開発環境（IDE）としてVisual Studio Codeを使用します。code.visualstudio.comからダウンロードできます。無料です。

インストールが完了したら、プロジェクトを初期化するためにコンソールを起動しましょう。ターミナルに移動して、「npm init」と入力します。これにより、プロジェクトが初期化されます。

プロジェクトの初期化中に、パッケージ名を「chrome-extension」とし、バージョンは「1.0」とします。その他の説明欄はスキップしても構いません。

次に、Google Chrome APIのインテリセンス（自動補完）を利用するために、”@types/chrome”というNPMパッケージをインストールします。これにより、プロジェクトの型定義がインストールされます。

インストールが完了すると、依存関係に”types chrome”が追加され、ログファイルが作成されます。ログファイルは今のところ無視してください。

また、”node_modules”フォルダにはパッケージが含まれています。

次に、Chromeの拡張機能ページに移動し、「chrome://extensions」と入力してください。ここで拡張機能を確認することができます。

開発者モードを有効にする必要があります。これにより、拡張機能を読み込んでデバッグし、リアルタイムのフィードバックを取得することができます。