如何构建 Chrome 扩展程序

Chrome 扩展程序是可以在 Chrome 浏览器中安装的小型 HTML、CSS 和 JavaScript 应用程序。

在本教程中，我们将构建一个扩展程序，允许用户根据所选国家/地区获取 covid19 病例详细信息。

步骤1：创建一个新目录“dist”，并在该目录下创建文件，如图所示

步骤 2：创建 HTML 文件

<!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：创建一个js文件来处理API调用

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 关键字，我们可以让其余代码在该段代码执行时停止执行。

在此示例中，我们等待 GET 请求的响应，然后将该响应设置为我们的articles变量。

Axios 是一个非常流行的 JavaScript 库，可用于执行 HTTP 请求，并且可在浏览器和 Node.js 平台上运行。它支持所有现代浏览器，包括 IE8 及更高版本。它基于 Promise，这使得我们能够轻松编写 async/await 代码来执行 XHR 请求。

以下是一些通过 API 访问数据的端点

https://coronavirus-19-api.herokuapp.com/countries - 获取所有国家/地区的详细信息
https://coronavirus-19-api.herokuapp.com/countries/india - 获取特定于**印度**的 covid19 病例详细信息

步骤 4：您还可以将 css 添加到 HTML 文件

步骤 5：创建 manifest.json 并添加以下代码。该文件包含有关 Chrome 如何处理扩展程序的信息。

{
    "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 才能兼容最新的 Chrome 浏览器，您可以随意指定名称/版本。

向 Chrome 添加扩展程序：

前往 Chrome 扩展程序页面，或者点击chrome://extensions导航到扩展程序页面。
打开页面后，点击“加载已解压的扩展程序包”，然后找到扩展程序包。

我最近已将此扩展提交审核，目前正在等待批准。

希望谷歌批准它:)

这是 Covid19 Extension 的工作视频

希望有用

❤️ 太棒了😊

文章来源：https://dev.to/sunilaleti/how-to-build-a-chrome-extension-3lpj