怎樣從零開始建立一個谷歌擴展程序？

來源：Jimmy

https://juejin.im/post/6890719051820695565

谷歌擴展程序是個HTML,CSS和JAVASCRIPT應用程序，它能夠安裝在谷歌瀏覽器上。javascript

下面的內容，指導感興趣的人兒建立一個谷歌擴展程序，它容許咱們去獲取不一樣國家新型冠狀病毒肺炎-covid19案例的信息。css

步驟1：建立目錄

建立一個名爲dist的文件夾，而後建立如下的文件。html

步驟2：建立HTML文件

以下內容：java

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Covid 19</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="index.js" defer></script>
  </head>
  <body>
    <div class="header">Covid 19</div>
    <div class="container">
    <form class="form-data" autocomplete="on">
      <div class="enter-country">
        <b>Enter a country name:</b>
      </div>
      <div>
        <input type="text" class="country-name" />
      </div><br>
      <button class="search-btn">Search</button>
    </form>
    <div class="result">
      <div class="loading">loading...</div>
      <div class="errors"></div>
      <div class="data"></div>
      <div class="result-container">
        <p><strong>New cases: </strong><span class="todayCases"></span></p>
        <p><strong>New deaths: </strong><span class="todayDeaths"></span></p>
        <p><strong>Total cases: </strong><span class="cases"></span></p>
        <p><strong>Total recovered: </strong> <span class="recovered"></span></p>
        <p><strong>Total deaths: </strong><span class="deaths"></span></p>
        <p><strong>Total tests: </strong><span class="tests"></span></p>
        <center><span class="safe">Stay Safe and Healthy</span></center>
      </div>
    </div>
  </div>
</body>
</html>

步驟3：建立JAVASCRIPT文件

JAVASCRIPT文件用來處理API，內容以下：ios

const api = "https://coronavirus-19-api.herokuapp.com/countries";
const errors = document.querySelector(".errors");
const loading = document.querySelector(".loading");
const cases = document.querySelector(".cases");
const recovered = document.querySelector(".recovered");
const deaths = document.querySelector(".deaths");
const tests=document.querySelector(".tests");
const todayCases=document.querySelector(".todayCases");
const todayDeaths=document.querySelector(".todayDeaths");
const results = document.querySelector(".result-container");
results.style.display = "none";
loading.style.display = "none";
errors.textContent = "";
// grab the form
const form = document.querySelector(".form-data");
// grab the country name
const country = document.querySelector(".country-name");

// declare a method to search by country name
const searchForCountry = async countryName => {
  loading.style.display = "block";
  errors.textContent = "";
  try {
    const response = await axios.get(`${api}/${countryName}`);
    if(response.data ==="Country not found"){ throw error;  }
    loading.style.display = "none";
    todayCases.textContent = response.data.todayCases;
    todayDeaths.textContent = response.data.todayDeaths;
    cases.textContent = response.data.cases;
    recovered.textContent = response.data.recovered;
    deaths.textContent = response.data.deaths;
    tests.textContent =  response.data.totalTests;
    results.style.display = "block";
  } catch (error) {
    loading.style.display = "none";
    results.style.display = "none";
    errors.textContent = "We have no data for the country you have requested.";
  }
};

// declare a function to handle form submission
const handleSubmit = async e => {
  e.preventDefault();
  searchForCountry(country.value);
  console.log(country.value);
};

form.addEventListener("submit", e => handleSubmit(e));

上面，咱們建立了一個名爲searchForCountry的異步函數，在該函數上，咱們可使用async-await的語法。async await容許咱們當正在等待服務端響應的時候，中止執行以後其餘相關的代碼。在代碼片斷前使用await關鍵字，當在執行該代碼片斷時，它以後的代碼將中止執行。git

在這個例子中，咱們await一個GET請求的響應，而後將響應值賦值給response變量。github

Axios是一個很受歡迎的JavaScript庫，它能夠很好處理HTTP請求，而且能夠在瀏覽器平臺和Node.js平臺使用。它支持全部的現代瀏覽器，甚至支持IE8。它是基於promise的，全部很方便咱們寫async/await代碼。web

下面是些咱們獲取數據的API：chrome

coronavirus-19-api.herokuapp.com/countries - 獲取全部國家的詳情
coronavirus-19-api.herokuapp.com/countries/i… - 獲取印度這個國家的 covid19案例信息

步驟4：建立CSS文件

根據我的的喜歡，編寫對HTML進行裝飾編程

步驟5：建立MANIFEST.JSON文件

建立一個名爲manifest.json的文件，而後將下面的代碼添加到文件中。這個文件包含了谷歌瀏覽器如何處理擴展程序的信息。

{
    "manifest_version": 2,
    "name": "Covid19",
    "version": "1.0.0",
    "description": "Provides the cases details regarding Covid19 with respective to any Country",
    "browser_action": {
      "default_popup": "index.html"
    },
    "icons":{
      "16": "./icons/16covid-19.png",
      "64": "./icons/64covid-19.png",
     "128": "./icons/128covid-19.png"
    },

    "content_security_policy": "script-src 'self' https://unpkg.com ; object-src 'self'"
}

manifest_version, name 和 version這三個字段很重要，必須聲明。擴展程序必須有"manifest_version": 2的鍵值對，這與最新谷歌瀏覽器合拍。而對於name/version的值咱們能夠按本身需求賦值。

效果GIF圖以下：

demo

最後一步：添加到谷歌擴展程序

你能夠點擊chrome://extensions 跳轉到谷歌擴展應用程序的管理頁面。

你也能夠以下操做跳轉到谷歌擴展應用程序的管理頁面

步驟：設置 - 擴展程序

當你打開擴展程序管理頁面後，你能夠點擊加載已解壓的擴展程序按鈕去上傳最開始新建的dist文件夾。

後話

原文：https://dev.to/sunilaleti/how-to-build-a-chrome-extension-3lpj
更多內容：https://github.com/reng99/blogs

本文分享自微信公衆號 - 編程微刊（wangxiaoting678）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。