如何使用Javascript构建一个显示激励性语录的Chrome扩展程序

在Chrome网络商店中存在的每一个Chrome扩展都在执行一项特定的任务。多年来，我不得不安装几个扩展，它们要么帮助我在工作中完成任务，要么使我能够最大限度地提高生产力。

在过去的几个月里，我使用了Pomodoro计时器扩展，我注意到工作效率陡然提高。所以我想，"我也要做一个类似的东西"--一个能在预定时间段显示激励性语录的Chrome扩展。

幸运的是，Chrome官方文档帮助我理解了我需要的概念，从而开始构建我想要的东西。Chrome扩展程序的开发相对容易，你可以在你的机器上创建它们，并让它们与网络上的任何页面互动。

把它们看作是驻留在浏览器上的小型应用程序，在它们的帮助下，我们可以访问有关网站的信息，并利用它们构建令人敬畏的东西。在本教程中，我们将使用Javascript建立一个Chrome扩展。

它的主要功能将是显示来自API的随机激励性语录。你将了解到这项工作中使用的核心概念，这足以让你建立类似的甚至更复杂的东西。

前提条件

为了更好地理解和构建本教程，你应该有。

安装了Chrome浏览器。
一个代码编辑器（就我而言是VS Code）。
一些关于JavaScript及其语法的知识。
打开你的桌面通知--这就是我们的激励语录将被显示的地方。

开始使用

为了开始工作，我们将需要在本地机器上创建一个目录来存放扩展的文件。

使用Windows命令提示符，我们可以输入以下内容。

mkdir Random-Quote-Extension
cd Random-Quote-Extension
code .

第一行是在我们的机器上创建一个新的文件夹，第二行是帮助导航到我们刚刚创建的文件夹，最后一行是在Visual studio代码中打开刚刚创建的文件夹。

接下来，我们将创建一个manifest.json 文件，并添加以下代码，使其看起来像这样。

{
  "name": "Random Quote Extension for Chrome",
  "description": "A Chrome Extension that shows random quotes as notification",
  "version": "1.0.0",
  "manifest_version": 3
}

manifest.json 文件包含关于扩展名的重要信息。

name 字段包含我们正在构建的扩展的标题信息--随机报价扩展。
description 字段顾名思义，对扩展的功能进行了简要描述。
manifest_version 字段告诉我们当前正在构建的版本。请确保你使用3.0，因为之前的版本（2.0）已被废弃。
另外，从一个小的version 开始是很好的，随着时间的推移，你可能想更新你的扩展。我现在就用1.0。

现在我们已经设置了清单文件，让我们在Chrome浏览器的开发者模式下将该目录作为一个扩展添加。

通过点击浏览器右上方的扩展菜单按钮，并在菜单底部选择管理扩展，导航到扩展管理页面。

你应该看到一个类似这样的页面。

developer

切换到开发者模式，并点击加载未打包的按钮。这将打开你的本地机器目录，并提示你选择你想加载为扩展的目录。

好了！你应该看到类似于图片的东西。你应该看到与下面的图片类似的东西。

unpacked

现在，在我们先前安装的扩展中列出了该扩展。不过，你会注意到你的扩展没有一个自定义图标。

让我们马上解决这个问题。

添加图标

为了将定制的图标附加到工具栏上，我们创建了一个行动字段，以容纳默认的图标字段，其中包含我们想要的图像。此外，为了在显示favicon的扩展管理页面上显示这些图标，我们附加了一个名为图标的新字段。

它的元素是默认图标所使用的相同图片。

继续下去，更新manifest.json 文件，使其看起来像这样。

{
  "name": "Random Quote Extension for Chrome",
  "description": "A Chrome Extension that shows random quotes as notification",
  "version": "1.0.0",
  "manifest_version": 3,
  "action": {
    "default_icon": {
      "16": "/images/favicon-16x16.png",
      "48": "/images/android-chrome-512x512.png",
      "128": "/images/android-chrome-192x192.png"
    }
  },
  "icons": {
    "16": "/images/favicon-16x16.png",
    "48": "/images/android-chrome-512x512.png",
    "128": "/images/android-chrome-192x192.png"
  }
}

你可能已经注意到 "16"、"48 "和 "128 "字段。它们是每张图片的像素大小（请忽略我对图片的命名惯例）。如果你正在制作一个自定义的图标，你将需要调整你的图像大小以符合标准--（16px by 16px, 48px by 48px, 128px by 128px）。

重新加载扩展，观察图标在工具栏和扩展管理页面的效果。

功能

我们现在安装了一个没有功能的Chrome扩展。这一点我们稍后会说，但为了清楚起见，我希望我们强调一下我们对扩展功能的期望。

这将是。

从API中获取数据。
在规定的时间间隔内连续调用API。

真棒！我们可以继续实现这些功能，但要注意的是我们可以继续实现这些，但首先，让我们创建背景脚本。

创建后台脚本

扩展是由用基本网络技术创建的各种组件组成的。HTML、CSS和JavaScript。组件包括background scripts content scripts options page 和其他一些组件。

根据扩展的预期功能，我们可能不需要使用每个组件。

让我们直接创建我们的background script ，并将其注册到我们的manifest.json 。

创建一个新的文件并将其称为background.js 。

接下来，让我们在我们的清单文件中注册它。如果你想知道为什么我们必须这样做，可以把清单想象成一个所有组件都被引用的寄存器。它们还显示了文件的预期行为。

manifest.json 文件现在看起来应该与此有些相同。

{
  "name": "Random Quote Extension for Chrome",
  "description": "A Chrome Extension that shows random quotes as notification",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "/images/favicon-16x16.png",
      "48": "/images/android-chrome-512x512.png",
      "128": "/images/android-chrome-192x192.png"
    }
  },
  "icons": {
    "16": "/images/favicon-16x16.png",
    "48": "/images/android-chrome-512x512.png",
    "128": "/images/android-chrome-192x192.png"
  }
}

扩展程序现在寻找的是service worker ：background.js 。当我们重新加载扩展时，Chrome会在后台脚本中搜索重要的指令和事件，并执行它们。

background.js

我们希望扩展程序在首次安装时能够监听事件，因此我们包括一个监听事件。

background.js ，看起来应该是这样的。

chrome.runtime.onInstalled.addListener(() => {
  console.log("onInstalled...");
});

添加权限

Chrome浏览器为特定用途提供了API，如存储、书签、cookies、报警、通知等。要访问它们，我们必须获得权限，我们通过在manifest.json 文件的权限字段下注册它们来实现。

我们的项目将需要chrome.alarms,chrome.notifications, 和chrome.storage APIs。

编辑清单文件，使其看起来像这样。

{
  "name": "Random Quote Extension for Chrome",
  "description": "A Chrome Extension that shows random quotes as notification",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "alarms", "notifications"],
  "action": {
    "default_icon": {
      "16": "/images/favicon-16x16.png",
      "48": "/images/android-chrome-512x512.png",
      "128": "/images/android-chrome-192x192.png"
    }
  },
  "icons": {
    "16": "/images/favicon-16x16.png",
    "48": "/images/android-chrome-512x512.png",
    "128": "/images/android-chrome-192x192.png"
  }
}

从API中获取随机引语

接下来是Chrome扩展的主要功能，我们将从随机报价API中获取数据。

使用承诺提取数据会返回一个随机报价，并附上该报价的原作者。我们可以将其记录到控制台，以验证其显示是否正确。

我们确实设置了后台脚本，以便在安装扩展时启动，因此我们希望在浏览器处于活动状态时获取激励性引语。

下面的代码片段显示了我们如何实现这一点。

chrome.runtime.onInstalled.addListener(() => {
  console.log("onInstalled...");

  async function startRequest() {
    const response = await fetch("https://api.quotable.io/random");
    const newData = await response.json();
    const data = `${newData.content} —${newData.author}`;
    console.log(data);
  }
});

每隔一段时间调用名言

我认为这部分的实现更有趣，因为我一开始就用错了方法。试图使用Javascript的setInterval() 和setTimeout() 函数，在预定的时间间隔内调用报价。

不知何故，从我能从网上的资源中得到的有限支持来看，浏览器扩展中的事件调度还没有真正被探索出来。

你可能想浏览一下Chrome为扩展程序提供的可用API列表，为你的下一个Chrome扩展程序寻找灵感😜（很有趣吧！）。

编辑background.js 文件，使其看起来像这样。

chrome.runtime.onInstalled.addListener(() => {
  console.log("onInstalled...");

  // create alarm after extension is installed / upgraded
  chrome.alarms.create("startRequest", { periodInMinutes: 4 });
  startRequest();
});

chrome.alarms.onAlarm.addListener((alarm) => {
  startRequest();
});

async function startRequest() {
  const response = await fetch("https://api.quotable.io/random");
  const newData = await response.json();
  const data = `${newData.content} —${newData.author}`;
  console.log(data);
}

chrome.alarms.create 创建一个警报。在这种情况下，它是API调用的事件。它以警报的名称(startRequest)和periodInMinutes 作为参数。当警报创建时，我们进行API调用startRequest() 。

然后我们创建一个监听器，并调用startRequest 函数。我们将继续前进并在我们的通知框中显示输出。

创建通知

chrome.notifications API被用来创建交互式通知，然后在系统托盘中显示给用户。

我们创建一个包含通知细节的对象。这些细节包括标题、要显示的信息、自定义的图标以及我们要创建的通知类型。

为了与通知进行交互，你可以将该字段设置为真。假的也行，因为我们想让通知自己来，自己走。

接下来，我们使用chrome.notifications.create 来创建通知，并作为一个参数调用对象options 。

将此添加到the background.js 文件中，我们得到。

chrome.runtime.onInstalled.addListener(() => {
  console.log("onInstalled...");

  // create alarm after extension is installed / upgraded
  chrome.alarms.create("startRequest", { periodInMinutes: 4 });
  startRequest();
});

chrome.alarms.onAlarm.addListener((alarm) => {
  startRequest();
});

async function startRequest() {
  const response = await fetch("https://api.quotable.io/random");
  const newData = await response.json();
  const data = `${newData.content} —${newData.author}`;
  console.log(data);

  var options = {
    title: "Random Quotes",
    message: data,
    iconUrl: "/images/favicon-16x16.png",
    type: "basic",
    // requireInteraction: true
  };
  chrome.notifications.create("", options);
}

最后，我们的励志语录就像这样显示在通知框中。

extension

现在你已经有了你的扩展并在运行，你可能想在Chrome网络商店发布它--不过你需要支付一点费用。

如果你决定不这样做，你仍然可以与一些朋友分享，即使不在网络商店上发布。

该怎么做？

在包含你的扩展的文件夹上点击右键。
选择send to compressed(zip)folder ，创建一个压缩文件副本。
通过任何媒介分享给你的朋友，例如邮件、硬盘等。
他们可以通过解压缩文件在他们的本地机器上安装扩展，然后在他们的浏览器上进入chrome扩展管理页面，像我们一开始做的那样点击load unpacked 。这应该会提示他们选择解压文件的文件夹。
最后，他们的系统通知应该是可见的。

总结

万岁 🎉 你已经学会了如何建立一个简单的Chrome浏览器扩展，在清单文件中注册背景脚本等组件，从API中获取数据，以及如何使用Chrome扩展的API，如chrome.alarms和chrome.notifications。

现在你可以在网络商店中与朋友分享，无论是否有主机。

如何建立一个使用Javascript显示激励性语录的Chrome扩展程序