APIを呼び出しにするクロム拡張を構築する方法.

ここで我々は何を構築されます
Chromeの拡張機能は、小さなHTML、CSSとJavaScriptのアプリは、我々はChromeのブラウザでインストールすることができます.
このチュートリアルでは、ユーザーがウェブサイトに移動することなく、国の名前を入力することによって、コロナウイルスの最新のデータを取得できる拡張機能を構築する予定です.
始めましょう!
1 .新しいディレクトリを作成し、そのディレクトリに移動します.私はコマンドラインのための吸盤ですので、あなたは私がこのポストで多くのLinux/MAC CLIコマンドを使用するのを見るでしょう.あとに続く問題はない.

mkdir covid-extension && cd covid-extension

実行してもNPMのパッケージを使用するように我々のアプリを設定しましょう

npm init -y

2 .いくつかのファイルを作成する必要があります.私はwebpackを使用するようにアプリを開発するように私はそのホットリロード機能を得ることができます.チェックアウトmy article on Webpack Webpackの動作方法を説明します.
速く起き上がる

npm i webpack && npm i webpack-cli

次に、distフォルダを作成します.フォルダの中にindex.html ファイルとmanifest.json ファイル.
次に、srcフォルダとインデックスを作成します.その中のJSファイル.
コマンドラインコマンドを使用できます

mkdir src && touch index.js

このWebPackコマンドをCLIから実行します.

webpack

このコマンドは自動的にmain.js ファイルの内部dist ディレクトリ.
3 .あなたのマニフェストに頭を入れなさい.JSONと次のコードを追加します.これはchromeがどのように拡張を処理するかに関する情報を含むファイルです.

{ "manifest_version": 2, 
  "name": "C19-Search!", 
  "version": "0.1.0", 
  "permissions": ["<all_urls>"], 
  "browser_action": 
   { "default_popup": "index.html" } 
}

マニフェストバージョン、名前とバージョンは重要で、宣言されなければなりません.あなたのエクステンションは、最新のChromeブラウザ(Googleが言うもの)で動作するように2のバージョンを持っている必要があります.ここで意味的なバージョン管理を使用しています.
パーミッションを設定しますall_urls 私たちの拡張がどんなページででも実行できるように.browser action Chromeにインデックスを表示するよう指示します.アイコンがクリックされるとき、ポップアップとしてのHTMLファイル.
4 .クロムの拡張子をchromeにロードしましょう.
あなたのChromeのブラウザのアドレスバー、頭にchrome://extensions/左上隅に向かってLoad unpacked ボタン.フォルダにアップロードするファイルがあるフォルダに移動します.次に、distフォルダをアップロードします.
私たちの拡張機能をアップロードする必要があります.下記を参照.

5 .インデックスへの頭.HTML .フック・アップmain.js JavaScriptファイル(自動的にWebpackによって作成されたときに実行)webpack ) あなたのHTMLに.
また、作成し、スタイルをフック.distフォルダ内のCSSファイルをHTMLにリンクします.
ファイル構造は以下のようになります.あなたはgitignore、coventsionを無視することができます.あなたがそれらを持っていないようにGIFとREADMEファイル.

次に、簡単なフォームを作成します.あなたのファイルは、現在下記のように見えなければなりません.
我々は非常に基本的なUIを作成します.

私たちのUIは、以下のようになります.何もきれいではないが、それは動作します.

スクリプトを書く前にaxiosをインストールする必要があります.Axiosは我々のアプリケーションの外からデータを引き出しましょう.ランnpm i axios --saveAxiosをインストールする.
我々のインデックスに向かいましょう.JSファイルと亀裂を取得します.私たちはデータを得るためにオープンソースAPIを使用します.

非同期関数searchForCountry そして、その関数の中で、async waitを使うことができます.async waitはサーバからの応答に依存したコードの実行を停止しますが、サーバからの応答を待ちます.コードの前にWAITキーワードを使用することで、コードの実行中に実行を停止するために、残りのコードを取得できます.
この例では、私たちのGETリクエストからレスポンスを待っています.
一度あなたのインデックスを完了したら.JSファイルを保存し、頭に戻るchrome://extensions/ アップロードしたエクステンションのリロードボタンを押す.
をクリックして拡張機能のアイコンを見て仕事!

そして、それ!
あなたはクロム拡張機能を持っています.
これが私のリンクですGitHub repo ソースコード.