怎样从零开始创建一个谷歌扩展程序？

Myth丶恋晨 2022-12-26 11:15 111阅读 0赞

![format_png][]

来源：Jimmy https://juejin.im/post/6890719051820695565

**谷歌扩展程序是个`HTML,CSS和JAVASCRIPT`应用程序，它可以安装在谷歌浏览器上。**

下面的内容，指导感兴趣的人儿创建一个谷歌扩展程序，它允许我们去获取不同国家**新型冠状病毒肺炎-covid19**案例的信息。

![format_png 1][] extension

### 步骤1：创建目录 ###

创建一个名为`dist`的文件夹，然后创建以下的文件。

![format_png 2][] step1

### 步骤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：创建JAVASCRIPT文件 ###

`JAVASCRIPT`文件用来处理`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`关键字，当在执行该代码片段时，它之后的代码将停止执行。

在这个例子中，我们`await`一个`GET`请求的响应，然后将响应值赋值给`response`变量。

`Axios`是一个很受欢迎的`JavaScript`库，它可以很好处理`HTTP`请求，并且可以在浏览器平台和`Node.js`平台使用。它支持所有的现代浏览器，甚至支持`IE8`。它是基于`promise`的，所有很方便我们写`async/await`代码。

下面是些我们获取数据的`API`：

*  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图如下：

![format_png 3][]

demo

### 最后一步：添加到谷歌扩展程序 ###

你可以点击chrome://extensions 跳转到谷歌扩展应用程序的管理页面。

> 你也可以如下操作跳转到谷歌扩展应用程序的管理页面

> 步骤：设置 - 扩展程序

当你打开**扩展程序管理页面**后，你可以点击`加载已解压的扩展程序`按钮去上传最开始新建的`dist`文件夹。

![format_png 4][] result

### 后话 ###

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

![format_png 5][]

[format_png]: /images/20221120/121f91348b9647708a1b57a222304f7b.png
[format_png 1]: /images/20221120/27af38a442664d9c83a41cc8ae0bb3ff.png
[format_png 2]: /images/20221120/7f2ec1da3c894bf18d0c7feb2ecba531.png
[format_png 3]: /images/20221120/594e9b8550e14e8c8bb9cbb3bd4d01be.png
[format_png 4]: /images/20221120/a9cc0c402504479c94743a96a8b7077e.png
[format_png 5]: /images/20221120/ad41c76ae7be44fdb2de0dc0064adb58.png