API를 호출하는 Chrome 확장 프로그램을 빌드하는 방법입니다.

다음은 우리가 만들 것입니다.

Chrome 확장 프로그램은 Chrome 브라우저에 설치할 수 있는 작은 HTML, CSS 및 JavaScript 앱입니다.

이 튜토리얼에서는 사용자가 웹 사이트를 탐색할 필요 없이 국가 이름을 입력하기만 하면 코로나 바이러스에 대한 최신 데이터를 얻을 수 있는 확장 프로그램을 구축할 것입니다.

시작하자!

1. 새 디렉토리를 만들고 해당 디렉토리로 이동합니다. 저는 명령줄에 약해서 이 게시물에서 여러 Linux/Mac CLI 명령을 사용하는 것을 볼 수 있습니다. 따라하는 데 문제가 없어야 합니다.

mkdir covid-extension && cd covid-extension

다음을 실행하여 npm 패키지도 사용하도록 앱을 설정해 보겠습니다.

npm init -y

2. 파일을 만들어야 합니다. 핫 리로드 기능을 사용할 수 있도록 앱을 개발할 때 웹팩을 사용하는 것을 좋아합니다. webpack 작동 방식을 설명하는 my article on Webpack을 확인하십시오.

빠르게 설정하려면 다음을 실행하세요.

npm i webpack && npm i webpack-cli

다음으로 dist 폴더를 만듭니다. dist 폴더 안에 index.html 파일과 manifest.json 파일을 만듭니다.

그런 다음 src 폴더와 그 안에 index.js 파일을 만듭니다.

명령줄 명령을 사용할 수 있습니다.

mkdir src && touch index.js

CLI에서 이 Webpack 명령을 실행합니다.

webpack

이 명령은 main.js 디렉토리/폴더 내에 dist 파일을 자동으로 생성합니다.

3. manifest.json으로 이동하고 다음 코드를 추가합니다. Chrome이 확장 프로그램을 처리하는 방법에 대한 정보가 포함된 파일입니다.

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

manifest_version, 이름 및 버전은 중요하며 반드시 선언해야 합니다. 확장 프로그램은 최신 크롬 브라우저(구글에서 말하는 것)와 작동하려면 manifest_version이 2여야 합니다. 원하는 이름/버전을 지정할 수 있습니다. 여기서는 시맨틱 버전 관리를 사용하고 있습니다.

확장이 모든 페이지에서 실행될 수 있도록 권한을 all_urls로 설정합니다. browser action 아이콘을 클릭하면 index.html 파일을 팝업으로 표시하도록 chrome에 지시합니다.

4. 다음으로 크롬 확장 프로그램을 크롬에 로드하겠습니다.

크롬 브라우저의 주소 표시줄에서 chrome://extensions/로 이동합니다.

왼쪽 상단 모서리를 향해 Load unpacked 버튼을 클릭합니다. 해당 폴더를 업로드할 파일이 있는 폴더로 이동합니다. 이제 dist 폴더를 업로드합니다.

이제 확장 프로그램을 업로드해야 합니다. 아래를 참조하십시오.


5. index.html로 이동합니다. main.js JavaScript 파일(webpack을 실행할 때 webpack에서 자동으로 생성됨)을 HTML에 연결합니다.

또한 dist 폴더 안에 styles.css 파일을 만들어 연결하고 HTML에 연결합니다.

이제 파일 구조가 아래와 같아야 합니다. gitignore, coventsion.gif 및 README 파일은 없을 것이므로 무시해도 됩니다.



다음으로 간단한 양식을 만듭니다. 파일은 이제 아래와 같아야 합니다.

우리는 아주 기본적인 UI를 만들 것입니다.


우리의 UI는 이제 아래와 같이 보일 것입니다. 예쁘지는 않지만 작동합니다.


6. 스크립트 작성을 시작하기 직전에 axios를 설치해야 합니다. Axios를 사용하면 애플리케이션 외부에서 데이터를 가져올 수 있습니다. 운영
npm i axios --save
액시오스를 설치합니다.

index.js 파일로 가서 크래킹을 해봅시다. 우리는 데이터를 얻기 위해 오픈 소스 API를 사용할 것입니다.


searchForCountry라는 비동기 함수가 있고 해당 함수 내에서 async-await를 사용할 수 있습니다. Async await를 사용하면 서버의 응답을 기다리는 동안 서버의 응답에 의존하는 코드 실행을 중지할 수 있습니다. 코드 조각 앞에 await 키워드를 사용하면 해당 코드 조각이 실행되는 동안 나머지 코드가 실행을 중지하도록 할 수 있습니다.

이 예에서는 사례, 복구 및 사망 변수에 대한 응답을 설정하기 전에 GET 요청의 응답을 기다립니다.

index.js 파일 작업을 마치고 저장했으면 chrome://extensions/로 돌아가서 업로드한 확장 프로그램에서 새로고침 버튼을 누르세요.

확장 프로그램 아이콘을 클릭하고 작동하는지 확인하세요!


그리고 그게 다야!

크롬 확장 프로그램이 있습니다.

다음은 소스 코드에 대한 내GitHub repo 링크입니다.