Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

怎样创建一个谷歌扩展程序 #75

Open
reng99 opened this issue Nov 3, 2020 · 0 comments
Open

怎样创建一个谷歌扩展程序 #75

reng99 opened this issue Nov 3, 2020 · 0 comments
Labels
blog a single blog google

Comments

@reng99
Copy link
Owner

reng99 commented Nov 3, 2020

banner

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

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

extension

步骤1：创建目录

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

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：

步骤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文件夹。

result

后话
@reng99 reng99 added blog a single blog google labels Nov 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
blog a single blog google
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@reng99