ホーム PC-モバイルアプリクロム 15 分で Chrome 拡張機能を作成する

15 分で Chrome 拡張機能を作成する

1月 10, 2024

—

in クロム

画像 1/2

時計

Chrome拡張機能

アプリ開発に少しでも足を踏み入れたいなら、Chrome 用のプラグイン (Google では拡張機能と呼んでいます) の作成に着手するよりもはるかに悪いことをする可能性があります。

単純な拡張機能を作成するのは、実際には子供の遊びです。これはシャローエンドに簡単に浸るのと同じですが、この方法で始めるのには十分な理由があります。世界は、XML、HTML、および JavaScript、CSS (カスケードスタイルシート)、JSON (JavaScript オブジェクト表記法) などのそれに付随する Web テクノロジをベースにしたアプリやプログラミングフレームワークにますます移行しています。そして、これらはまさに Chrome 拡張機能のベースとなっているものです。

チュートリアル

拡張機能を Google Chrome で動作させる方法

ブラウザー拡張機能を作成するプロセスを確認することで、世界を変えるアプリを作成する際に遭遇するプログラミングプラットフォームやアプリ構造について適切な準備を整えることができます。

私たちが他の主要なブラウザではなく Google Chrome を選択した理由は 2 つあります。1 つはその拡張機能フレームワークが最もシンプルで、もう 1 つは Google 独自のドキュメントが他の追随を許さないものです。この超高速の入門を完了したら、混乱することなく次のステップに進むことができる Google チュートリアルを利用できます。

Chrome 拡張機能の構造

シンプルな拡張機能を起動して実行するために、プログラミング環境や特別なウィジェットをダウンロードする必要はありません。 Chrome 拡張機能は、本質的には、わずかに異なるメカニズムを介して表示される単なる Web ページです。つまり、拡張機能は標準的な小学生レベルの HTML と同じくらい単純なもので、アクティブ化するとポップアップ表示されます。非常に迅速に起動して実行でき、人間が読めるテキスト形式のファイルを少し調整するだけで、徐々に機能を拡張し、新しいことを試すことができます。

シャイニークローム

Chrome の良い点は、開発者サポートが組み込まれていることです。Chrome を起動したら、[ツール] メニュー (スパナアイコン) をクリックし、[ツール] | [ツール] を選択します。拡張機能を使用すると、標準の拡張機能ウィンドウが表示され、そこから「適切な」公開済み拡張機能をダウンロードして追加できます。ただし、ページの右側には「開発者モード」というラベルのリンクもあります。「+」記号をクリックしてリンクを展開すると、「解凍された拡張機能をロードする」オプションが表示されます。これにより、インターネット配布用に準備されたフォルダーではなく、ハードディスク上の標準フォルダーから新しい拡張機能をロードできるようになります。その方法については、ステップバイステップのウォークスルーを参照してください。

最初の内線番号

最初の拡張機能を作成するには、2 つのことを行う必要があります。まず、マニフェストファイルを作成します。これは、ほとんどの Web 指向アプリで遭遇するもので、拡張機能の名前、機能、リソースの場所などの側面を説明します。

次に、さらに華やかにするために、拡張機能のアイコンを作成します。そうすれば、拡張機能をダウンロードしたときに、拡張機能を愛する人々の心に消えない痕跡を残すことができます。ただし、アイコンは小さくする必要があります: わずか 19 x 19 ピクセルです。 PNG または JPEG 形式にすることができます。ここでは縮小した PC Pro ロゴを使用しています。

Chrome 拡張機能のマニフェストファイルは JSON で記述されます。これは、Web 対応アプリ間で柔軟なデータ交換を行うために、人が読みやすく編集可能なファイル形式になるように特別に設計されています。最初のマニフェストの JSON は単純で、実際のコードは 5 行のみで、いくつかの中括弧が挿入されています。

{ “name” : “PC Pro Extension Test”, “version” : “0.1”, “description” : “ほとんど何もしない拡張機能。”, “browser_action” : { “default_icon” : “pcpro.jpg” } }

ご覧のとおり、JSON 形式は読みやすく、各属性名が引用符で囲まれ、コロン区切り文字が続き、その後に実際の属性データが引用符で囲まれています。属性タグとデータのセットはカンマで区切られます。実際に必要な属性は、「名前」データと「バージョン」データの 2 つだけです。「ブラウザアクション」属性では、ちょっとした工夫が行われます。