「私たちの現在の生活の中で、ソーシャル メディア アプリや Google 検索エンジンを娯楽や検索の目的で使用することにもっと熱心になっています。つまり、「Google」検索エンジンを介して何らかの教育トピックを調査し、一般的な知識も得ています。 Google 検索エンジンを使用して何かを検索するには、携帯電話、ラップトップ、またはパーソナル コンピューターに何らかのブラウザーが既にインストールされている必要があります。今日の世紀で最も使用され効率的なブラウザの 1 つは、「Google Chrome」ブラウザで、拡張機能のユーティリティとともに多くの優れた機能を備えています。 「拡張機能」は、ウェブサイトやさまざまな機能を制限または許可するために、どのブラウザーにもあるプラグインです。これらの拡張機能は通常、組み込まれていません。必要に応じて、各拡張機能をブラウザーに個別に追加する必要があります。テクノロジーの専門家であれば、マニフェスト JSON ファイルを使用して拡張機能をいくつかの手順で作成および追加する方法を知っているかもしれません。したがって、この記事では、Google Chrome ブラウザーで新しい拡張機能を作成するためのすべての手順について説明します。
拡張機能を作成する方法を確認する前に、Google Chrome ブラウザーが既に起動しており、「Google」検索エンジンに背景が含まれていないことを確認する必要があります。下に添付された画像には、検索エンジン「Google.com」の背景がなく、白い背景のみであることがわかります。
拡張フォルダを追加
Windows システムのアプリから Visual Studio Code ツールをすばやく開きます。 Visual Studio Code を適切に開き、使用できるようにするには、最大 1 分かかる場合があります。適切に起動されて使用できるようになったら、以下に示す上部のタスクバーにある「ファイル」メニューリストを介して、既に生成されたフォルダー「拡張機能」を追加しました。 「Extension」フォルダーを作成した後、その中に「image」という名前の別のフォルダーを追加しました。このフォルダーには、ブラウザーで拡張機能のアイコンとして使用される画像が含まれています。それに伴い、「manifest.json」ファイルを 1 つ、「script.js」という名前の JavaScript ファイルを 1 つ追加して、新しい拡張機能を作成し、ブラウザに追加しました。 manifest.json ファイルをダブルクリックして JSON で作業を開始し、拡張機能を作成して使用して「Google」の背景を変更します。
マニフェスト ファイルの作成
manifest.json ファイル内に、以下に示す「JSON」コードを追加する必要があります。このコードは、拡張機能を作成して Google Chrome ブラウザに追加するための実際の構成スクリプトです。この JSON コードは、変数マニフェスト バージョンを「2」として初期化し、作成する拡張機能の名前、つまり「Change Background」で開始されています。この後、「説明」変数内に拡張機能の簡単な説明を追加しました。
それに伴い、エクステンションのバージョンを「1.0」として追加いたしました。 「拡張機能」のすべての基本構成が作成されたら、拡張機能のアイコンとして使用される画像アイコンへのパスを追加する必要があります。変数「browser」は、Google Chrome ブラウザーのトップ タスクバーの拡張機能アイコンを設定するために定義されています。つまり、特定のサイトまたはすべてのサイトで今後使用できるように、すべての拡張機能が表示される場所です。この後、ブラウザーが毎回異なるファイルを使用できるように、サイズの異なる 3 つの画像ファイルへのパスを追加しました。
それに伴い、「page_action」変数を使用して、Google Chrome の上部タスクバーから「拡張機能」アイコンをクリックした後に表示される画像を表示しました。 「Default_icon」変数は、各リロード時にアイコンとして使用される画像の 3 つの異なるパス値と共に使用されています。この目的のために、3 つの異なるイメージ ファイルが使用されます。最後の content_scripts 変数は、合計 2 つの新しい変数、つまり、match と CSS を取ります。 「matches」変数には、この新しい拡張機能の使用後に変更される Web サイトへのパスが含まれています。それに加えて、変数「CSS」には、拡張機能を適用した後に Google.com のスタイリングに使用される CSS ファイルの名前が含まれています。つまり、拡張機能を有効にしてリロードするたびに Google.com をスタイリングします。このコードが完成して使用できるようになったので、すぐに保存して「main.css」ファイルに移動します。
main.css CSS ファイル内で、マニフェスト ファイル拡張子を作成するためのスタイルを追加しています。スタイリングは、html の「body」タグを使用して適用されます。つまり、マニフェスト ファイルの「body」領域全体に適用されます。検索エンジンからの画像ファイルの「URL」を使用して、Google.com の新しい背景を設定しています。次に、何よりも先にコードを保存します。
必要なコード (manifest.json ファイルと main.css ファイル) を完成させた後、新しいタブで URL chrome://extensions を介して Google Chrome ブラウザーで拡張機能ユーティリティを開く必要があります。 Extensions ユーティリティ領域が開きます。開発者モードから、展開された「Extension」フォルダーをローカル システムから読み込んで、下の画像に表示されている「パッケージ化されていない読み込み」ボタンを使用して拡張機能にする必要があります。表示されているように、この拡張機能は効果的に Chrome ブラウザーに追加されています。エラーを削除して完全に機能させます。
「拡張機能」アイコンから、「背景の変更」拡張機能を選択してタスクバーに表示します。つまり、「C」アイコン拡張機能です。
Google.com をリロードすると、この拡張機能を使用して背景が更新されました。
結論
Windows システムでブラウザーを使用する方法の説明から始めて、ブラウザーにおける拡張機能の重要性についても説明しました。拡張機能の簡単な説明の後、マニフェスト JSON ファイルを使用して Google Chrome ブラウザーの拡張機能を作成する方法と、それを使用して検索エンジン「Google.com」の背景を変更する方法を説明しました。拡張機能を Google chrome にロードした後、Google.com で使用して背景を変更しました。