如何创建 Google Chrome 扩展程序？你来对地方了。在本教程中，我们将完成开发 Chrome 扩展程序所需的所有步骤。
Google Chrome 扩展程序是在 Chrome 浏览器中运行的应用程序。它们提供附加功能、与第三方网站或服务的集成以及定制的浏览体验。
在这个循序渐进的教程中，我将向您展示如何使用基本的 Web 技术：HTML、CSS 和 JavaScript 从头开始在 Google Chrome 中创建扩展程序。
我们将构建一个简单的语言选择器扩展，在构建它的过程中，我们将学习一些新的和令人高兴的 JavaScript 编码方式。
在本教程结束时，您应该知道如何从头开始开发 Chrome 扩展程序。
这是您将在本教程中学到的内容
1、了解如何在 Google Chrome 中打开开发者模式以在 Chrome 中测试、调试和预览我们的扩展程序。
2、创建一个清单文件，我们将在其中与 Chrome 共享有关我们在 Chrome 中的扩展的所有内容。其中一些版本将指向我们的 JavaScript Chrome 扩展。
3、在我们开发 Chrome 扩展程序时添加标志图标。
4、在开发 Chrome 扩展程序时创建一个弹出菜单。
5、在开发 Chrome 扩展程序时添加图标。
6、在 Chrome 中为您的扩展程序添加更多语言。
7、发布您的 Google Chrome 扩展程序。
1. Chrome 开发者模式设置 + Chrome 扩展和 API
在开始构建扩展之前，我们需要在 Chrome 浏览器中打开开发者模式。此功能允许开发人员在扩展仍处于开发阶段时主动测试、调试和预览扩展。
要启用开发人员模式，请单击窗口右上角的三个点，转到更多工具 > 扩展，然后在右上角切换开发人员模式。
现在您将能够在浏览器中加载和测试您的扩展程序。
此外，您可以查看Chrome API 参考以了解 Chrome 为构建扩展提供的各种 API。我们稍后将在本教程中使用其中的几个 API。
2. 创建清单文件以使用 Chrome 构建
清单文件为 Chrome 提供了有关您的扩展程序所需的所有信息。
在创建清单文件之前，为您的项目创建一个空文件夹——我将其称为项目文件夹。我命名我的 Lpicker。
在文件夹中，创建文件manifest.json并在其中包含以下代码：
{
"name": "Language Picker",
"description": "A simple extension for choosing from different language options",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"]
}
名称、描述和版本属性都提供了在我们的扩展程序加载到浏览器时将公开显示的信息。
该manifest_version属性对 Chrome 尤其重要。Chrome 具有三个清单版本：1、2 和 3。版本 1 已弃用，版本 3 是撰写本文时推荐的最新版本。
该permissions属性是我们希望 Chrome 授予我们的扩展访问权限的 API 数组。
background包含服务工作者。service_worker指向我们的 JavaScript Chrome 扩展程序的代码，只要我们的扩展程序加载到浏览器上就会运行。
我们将创建背景代码，但在此之前，我们需要创建我们的语言标志。
3.添加标志图标
在您的项目文件夹中创建标志目录，然后下载代表五种不同语言的五个标志图像。您可以从 flaticon 下载标志图标。
确保在保存每个标志时使用以下命名约定：english.png、chinese.png、italian。png等，如下图所示。
现在创建 service worker 文件background.js并在其中包含以下代码：
let language = 'url(flags/english.png)';
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ language });
console.log(`Default background language set to ${language}`);
})
在代码中，我们只需添加一个事件监听器来监听我们的扩展程序的运行。当我们的扩展程序即将运行时，我们访问 Chrome 上的本地存储 API，并将英语设置为默认语言，由标志 URL 表示。
现在将浏览器导航到chrome://extensions/，单击Load unpacked选项，导航到您的项目文件夹，然后选择它。如果您的网络清单是正确的，那么 Chrome 将成功加载您的扩展程序。
你应该会发现你的扩展看起来像这样：
4. 创建弹出菜单以使用 Chrome 构建
每当我们单击任务栏上的扩展图标时，我们都希望出现一个包含我们的语言选项（由标志表示）的小弹出窗口。
我们首先在manifest.json文件中添加一个actions键：background
"action": {
"default_popup": "popup.html"
},
如果您使用清单版本 2，它将是browser_action而不是action.
现在我们已经创建了对弹出页面的引用，让我们创建用于显示它的标记。
在项目文件夹中创建文件popup.html并包含以下标记：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="container">
<button id="activeFlag"></button>
</div>
<script src="popup.js"></script>
</body>
</html>
首先，我们包含一个指向popup.css的链接。这是样式表的内容：
.container {
width: 300px;
}
button {
height: 30px;
width: 30px;
outline: none;
border: none;
border-radius: 50%;
margin: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
在 HTML 正文中，我们创建了一个容器<div>元素来保存我们的标志，它由一个按钮元素表示。
在 HTML 的末尾，我们还链接了一个名为popup.js的脚本。现在在您的文件夹中创建popup.js并使用以下代码：
const activeFlag = document.getElementById('activeFlag');
chrome.storage.sync.get("language", ({ language }) => {
activeFlag.style.backgroundImage = language;
});
目前，此脚本负责从本地存储中检索默认标志的 URL，并将其作为背景图像传递给按钮。稍后我们将扩充代码。
在浏览器中重新加载扩展并将其固定到任务栏以便快速访问。
当您单击任务栏上的扩展程序时，浏览器中应显示一个包含英文标志的弹出窗口。
5.添加图标
要将图标添加到我们的扩展程序，我们将做两件事。首先，我们将通过在里面添加一个字段来修改我们的manifest.json文件default_iconactions:
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "./images/uk.png",
"32": "./images/uk.png",
"48": "./images/uk.png",
"128": "./images/uk.png"
}
},
在这里，我们为不同的像素大小指定一个图标。为方便起见，我对不同的像素大小使用了相同的图像，但您应该始终使用不同大小的图像。
然后，就在actions清单中的字段下方，我们还需要添加一个icons包含相同值和图标路径的字段：
"icons": {
"16": "./images/uk.png",
"32": "./images/uk.png",
"48": "./images/uk.png",
"128": "./images/uk.png"
},
保存您的文件并在浏览器上的chrome://extensions/刷新您的扩展程序。您的新图标应反映在扩展中，如下所示。
6.添加其他语言选项
现在，我们将在弹出菜单中包含其他语言选项。
我们将从更新popup.html<div>中的容器开始。该元素将充当我们将要创建的其他标志的包装器。使用以下代码更新div：container
<div class="container">
<button id="activeFlag"></button>
<div id="flagOptions">
<p>Choose a different language</p>
</div>
</div>
然后，添加到我们的popup.js文件中，我们将创建一个对 的引用div.flagOptions，并创建一个包含语言选项的数组：
const flagOptions = document.getElementById("flagOptions");
const otherLangs = ["english", "chinese", "hindi", "italian", "german"];
下面，我们将创建函数constructFlags。顾名思义，这个函数将负责div.flagOptions在弹出菜单中创建和插入其他标志：
function constructFlags(otherLangs) {
chrome.storage.sync.get("language", (data) => {
const currentLang = data.language;
for (let lang of otherLangs) {
const button = document.createElement("button");
const langURL = `url("flags/${lang}.png")`
button.dataset.language = langURL;
button.style.backgroundImage = langURL;
if(lang === currentLang) {
button.classList.add(".currentFlag");
}
button.addEventListener("click", handleFlagClick)
flagOptions.appendChild(button);
}
})
}
constructFlags将语言数组（顺便说一下也是文件前缀）作为参数并从本地存储访问活动语言。
然后，在一个for循环中，我们构造一个新按钮并将当前标志设置为新按钮的背景图像。如果当前迭代的语言选项与本地存储中的活动语言选项匹配，则我们将.currentFlag类添加到按钮。
然后，我们监听按钮上的单击事件，并handleFlagClick在触发该事件时调用。最后，我们将按钮附加到<div>弹出菜单中的容器中。
这是函数的逻辑handleFlagClick：
function handleFlagClick(e) {
const currentFlag = e.target.parentElement.querySelector('.currentFlag');
if(currentFlag && currentFlag !== e.target) {
currentFlag.classList.remove(".currentFlag")
}
const language = e.target.dataset.language
e.target.classList.add(".currentFlag");
chrome.storage.sync.set({ language });
activeFlag.style.backgroundImage = language;
}
此功能基本上.currentFlag从其他语言选项中删除类，然后将类添加到用户单击的选项中。
最后，仍然在 popup.js 中，我们constructFlags()使用语言列表调用函数：
constructFlags(otherLangs);
这就是这个扩展的编码！您可以从我们的 GitHub 存储库中获取该项目的源代码。
7. 发布你的扩展
最后一步是发布你的扩展。为此，您需要先注册为 Chrome 网上应用店开发者。该过程非常简单，尽管您需要支付少量费用（撰写本文时为 5 美元）。
付款后，您将可以使用您的 Google 帐户登录开发者控制台。从那里，系统会提示您上传新扩展并将其发布到 Chrome 网上应用店。
一旦您的提交获得批准，您的扩展程序将出现在 Chrome 网上应用店中，随后任何 Google Chrome 用户都可以安装。
最后
现在您知道如何创建 Chrome 扩展程序了！就是这样！开发 Chrome 扩展程序从未如此简单。
在这个教程中，我们仅使用 HTML、CSS 和 JavaScript 代码构建了一个简单的语言选择器扩展。
您现在应该能够通过 API 构建 Chrome 扩展，只需使用基本的 Web 代码从头开始创建您自己的扩展！
文章目录
- 这是您将在本教程中学到的内容
- 1. Chrome 开发者模式设置 + Chrome 扩展和 API
- 2. 创建清单文件以使用 Chrome 构建
- 3.添加标志图标
- 4. 创建弹出菜单以使用 Chrome 构建
- 5.添加图标
- 6.添加其他语言选项
- 7. 发布你的扩展
- 最后
-
-
xiuno