ホーム インターネット 独自の Chrome 拡張機能を作成する方法

独自の Chrome 拡張機能を作成する方法

Chrome 拡張機能の作成は、最初に想像するほど複雑ではありません。
実際、これまでに JavaScript と HTML に手を出したことがあれば、ほとんどの知識とツールを自由に使えるようになります。知っておく必要があるのは、Chrome がそれを解釈して利用できるように、それを組み合わせる方法だけです。
コーディングに慣れていない場合でも、この簡単なチュートリアルに従うことができ、終了するまでに、オープンソースの百科事典である Wikipedia を使用して事実をすばやく検索できる拡張機能を作成することができます。
必要なのはテキスト エディターだけです。拡張機能のアイコンをデザインするために、現在のお気に入りである Sublime Text、Google Chrome ブラウザー、および Paint.NET などのペイント アプリケーションを使用しました。

Chrome 拡張機能の作成: 基本

Chrome 拡張機能には、「ページ アクション」と「ブラウザ アクション」の 2 種類があります。ページ アクションのアイコンは Chrome のアドレスバー内に表示され、現在表示されているタブに読み込まれているページにのみ影響します。ページ アクションの例としては、ページの RSS フィードを購読できるボタンがあります。
一方、ブラウザのアクションは読み込まれたページとは独立して動作し、そのアイコンはアドレスバーの外側に表示されます。私たちの Wikipedia 拡張機能はブラウザーのアクションであり、どの Web ページやタブを開いても利用できるようにしたい拡張機能です。
Chrome 拡張機能を作成する最初のステップは簡単です。すべてのファイルを保存できるフォルダーを作成します。これは PC またはラップトップ上のどこにでも置くことができますが、デスクトップやマイ ドキュメント フォルダーなど、簡単にアクセスできる場所に置くのが合理的です。
次に、コードを含むテキスト ファイルを作成する必要があります。可能な限り最も単純な Chrome 拡張機能を作成しているため、必要なのはマニフェスト ファイル、HTML ファイル、PNG ファイルだけです。
2 つの新しいテキスト ファイルを作成し、次のように名前を変更します。
マニフェスト.json
ディスプレイペイン.html
これらのファイルは何をするのでしょうか?マニフェスト ファイルは説明書です。これにより、拡張機能の種類、その名前、使用しているマニフェスト ファイル形式のバージョンに加え、ボタンのアイコンが存在する場所や拡張機能が実行する必要があるさまざまなファイルなど、その他の重要な情報が Chrome に通知されます。 HTML ファイルには、拡張機能がクリックされたときに何を行うか、または表示するかを指示するコードが含まれています。
PNG ファイルは 19 x 19 ピクセルの画像で、ツールバーの拡張機能のボタンに表示されます。アイコンはシンプルにしておくのが最善です。単一の文字「W」を使用して、Paint.NET でアイコンを作成しました。
アイコン
画像をデザインしたら、ファイルに icon.png という名前を付けてフォルダーに保存し、必要なコードをテキスト ファイルに入力します。高解像度のディスプレイでアイコンがぼやけて見えたくない場合は、38 x 38 ピクセルの画像を作成することもできます。

Chrome 拡張機能の作成: コード

マニフェスト ファイルは、JavaScript プログラミング言語のサブセットである JavaScript Object Notation (JSON) を使用して構築されます。以下の例からわかるように、マニフェスト ファイルは非常に基本的なものになります。これらには、中括弧で囲まれたコードのブロックが含まれており、これには多くの設定が含まれます。
または「フィールド」。
必須フィールドは、マニフェストのバージョンと、コード ブロックの先頭に表示される名前だけです。マニフェストにはいくつかの追加機能が追加されています。説明フィールドとバージョン番号フィールドがあり、拡張機能のタイプがブラウザーのアクションであることも Chrome に伝えました。

「独自の Chrome 拡張機能を作成する方法」に関するベスト動画選定!

【生産性UP】Google Chromeの拡張機能おすすめ10選!
【神】知らないとマジで損するYoutube専用のクローム拡張機能を紹介するぞ