如何构建 Chrome 扩展程序

已发表: 2022-02-24

虽然现在似乎所有东西都有一个扩展，但对于一个人来说，为特定目的或需要寻找一个浏览器扩展并不是不可能的。建造一个有多复杂？您将在下面找到有关如何创建 Chrome 扩展程序的分步指南：

第 1 步：要求

开始前的两个注意事项：

虽然这对大多数人来说似乎很明显，但在 Google Chrome 本身中构建您的扩展程序很重要。
在此过程中测试您的工作。边走边修正编码错误比完成后回头更容易。

在开始之前，您需要确定扩展的功能。它将服务于什么目的？关注受众的兴趣和问题，这样您就可以清楚地定义您可以提供什么样的解决方案。

一旦你覆盖了这个，检查设计。每个上传到 Google Chrome 商店的扩展程序都需要一个图标。您可以自己创建或外包设计。一旦你有了你的图标，你就可以开始构建你的扩展了。

第 2 步：构建模块

与每个软件一样，扩展名将包含多个文件。因此，您需要做的第一件事是创建一个目录来存放您的所有扩展文件。

目录是在您的计算机上存储文件的位置。 任何具有分层文件结构的操作系统，例如 MS-DOS、OS/2 或 Linux，都有一个文件目录。

为什么需要目录？因此，当 Chrome 加载您的扩展程序时，您可以从正确的文件夹中提取文件。

manifest.json 文件

接下来，您需要创建扩展的清单文件。

清单是通知操作系统如何启动程序的文件。 清单文件中的设置始终使用 XML 语言指定。清单通常用于包括权限等设置，通知操作系统程序将使用哪个版本的 DLL。

对于您的扩展程序，清单文件将为 Chrome 提供加载扩展程序的说明。

创建清单文件

在 Chrome 中，创建一个名为manifest.json的文件并将其添加到您的目录中。 将您需要的代码添加到清单文件中。然后添加以下代码：

{
“名称”：“入门示例”，
“描述”：“构建一个扩展！”，
“版本”：“1.0”，
“清单版本”：3
}

扩展的权限取决于扩展功能。您可以在 Chrome 扩展文档中找到所有权限及其含义的列表。

弹出页面

如果您的网站需要弹出窗口，您应该将其添加到您的代码中。

在清单文件中使用browser_action指定文件的名称。
使用 HTML 或 CSS 构建弹出页面。您可以使用 SVG 添加图像。
使用 JavaScript 向弹出窗口添加功能。指定 JavaScript 文件并将其链接到您的弹出文件中。例如：
您可以创建功能并访问弹出 DOM。这是一个如何做到这一点的例子。

document.addEventListener(“DOMContentLoaded”, () => {

var button = document.getElementById(“提交”)
button.addEventListener(“点击”, (e) => {
控制台.log(e)
})
})

内容脚本

content_script 部分定义了扩展应该在哪里工作。如果您希望扩展程序在所有站点上工作，您应该编写：

“内容脚本”：[
{
“匹配”：[“<all_urls>”]，
“css”：[“background.css”]，
“js”：[“background.js”]
}
],

如果您希望扩展程序在单个站点上工作，例如 Facebook，您应该添加 [“https://facebook.com/*”]

活动页面

事件是一个对象，它使您能够在有趣的事情发生时得到通知。例如，您可以使用 chrome.alarms.onAlarm 事件在警报到期时收到通知。

chrome.alarms.onAlarm.addListener（函数（警报）{
appendToLog('alarms.onAlarm -'
+ ' 名称：' + 警报名称
+ ' scheduleTime: ' + alarm.scheduledTime);
});

您可以在 Chrome 文档中了解有关活动页面的更多信息

内容.js

内容脚本是作为浏览器扩展一部分的 JavaScript 文件。内容脚本比普通的 javascript 拥有更多的权限。

第 3 步：从 Chrome 扩展弹出窗口中打开一个弹出 HTML 文件

如果您在本机 chrome 扩展程序中放置一个按钮，那么当您单击此按钮时，您可以在不同的内容中制作另一个 HTML 弹出窗口。这是 StackOverflow 上的一个示例：

manifest.json：

{
“名称”：“备忘单”，
“描述”：“备忘单扩展”，
“版本”：“1.0”，
“manifest_version”：3，
“背景”： {
“service_worker”：“background.js”
},
“权限”：[“存储”、“活动标签”、“脚本”、“标签”]、
“行动”： {
“default_popup”：“popup.html”，

“默认图标”：{
“16”: “/images/get_started16.png”,
“32”：“/images/get_started32.png”，
“48”：“/images/get_started48.png”，
“128”：“/images/get_started128.png”
}
},
“图标”：{
“16”: “/images/get_started16.png”,
“32”：“/images/get_started32.png”，
“48”：“/images/get_started48.png”，
“128”：“/images/get_started128.png”
}
}

popup.html：
<!DOCTYPE html>
<html>
<头部>
<link rel=”stylesheet” href=”style.css”>
</head>
<正文>
<button id=”git_Sheet”>git 表格</button>
<script src=”popup.js”></script>
</正文>
</html>

和 popup.js 文件：

让 gitSheet = document.getElementById(“git_Sheet”); gitSheet.addEventListener(“点击”, async () => { 让
= 等待 chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: ShowGitSheet, }); }); 函数 ShowGitSheet() { chrome.browserAction.openPopup({ popup: “git_popup.html” }); }

提示：如果您希望 Firefox 以外的其他浏览器运行您的扩展程序，请使用 chrome.windows.create({url: '...', type: 'popup'}) 而不是 chrome.browserAction.openPopup。

第 4 步：在 Chrome 中安装扩展程序后检查错误

完成构建阶段后，就该测试扩展程序以确保 Chrome 能够运行它了。要加载您的扩展程序并开始调试，请执行以下步骤：

在 Google Chrome 浏览器中打开 chrome://extensions。
通过选中右上角的开发人员框来设置开发人员模式。
单击“加载解压缩的扩展程序”，您将看到您的文件，其中包含选择它的选项。
如果您的扩展程序有效，它应该在您选择它时立即加载。
如果它无效，您将看到一条错误消息。

编写代码时，最常见的错误是语法错误。因此，第一件事是再次检查所有逗号和括号是否位于正确的位置和正确的格式。

然后，确保选中“启用”框，以便您可以看到它正在运行。

第 5 步：将逻辑添加到行动中。

一个好的经验法则是将 API 调用放在后台脚本中，将 DOM 操作放在内容脚本中。让我们看一个添加后台脚本的示例：

在扩展目录中创建名为background.js的文件
在清单中注册后台脚本

{
“名称”：“入门示例”，
“描述”：“构建一个扩展！”，
“版本”：“1.0”，
“manifest_version”：3，
“背景”： {
“service_worker”：“background.js”

}
}

当您重新加载扩展程序（例如事件）时，Chrome 可以扫描文件以获取额外说明。

添加脚本。根据您扩展的目的，它会有所不同。

为了帮助您的扩展在安装时获取信息，您应该在后台脚本中包含 runtime.onInstalled 的侦听事件。然后，onInstalled 侦听器使用存储 API 获取值，因此扩展组件可以访问该值并对其进行更新。

// 背景.js
让颜色 = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ 颜色 });
console.log('默认背景颜色设置为 %cgreen', `color: ${color}`);
});

在 Google Chrome 开发者网站上详细了解后续步骤。这包括如何创建用户界面和图标以及建立一些层逻辑以增强用户交互。

像往常一样，要开始设计界面，您需要在清单文件中注册一个浏览器操作。例如，如果您使用弹出窗口，代码可能如下所示：

<!DOCTYPE html>
<html>
<头部>
<link rel=”stylesheet” href=”button.css”>
</head>
<正文>
<button id=”changeColor”></button>
</正文>
</html>

图标的要求是什么？ 对于图像，16×16 和 32×32 像素。所有图标都应该是方形的。

不要忘记添加您的逻辑脚本，以便您的扩展程序知道该做什么。 例如，您可以将其添加到 popup.js 脚本的末尾。

// 单击按钮时，将 setPageBackgroundColor 注入当前页面
changeColor.addEventListener(“点击”, async () => {
让
= 等待 chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
目标：{ tabId：tab.id }，
功能：设置页面背景颜色，
});
});
// 这个函数的主体将作为内容脚本在里面执行
// 当前页面
函数 setPageBackgroundColor() {
chrome.storage.sync.get(“color”, ({ color }) => {
document.body.style.backgroundColor = 颜色；
});
}
函数 setPageBackgroundColor() {
chrome.storage.sync.get(“color”, ({ color }) => {
document.body.style.backgroundColor = 颜色；
});

第 6 步：试用您的扩展程序

下一步是合乎逻辑地持续测试扩展，这样您就可以确保一切正常运行。如果您将测试外包，请借此机会检查界面的直观程度。根据测试结果，调整你的脚本，然后再次测试。

第 7 步：向 Chrome 网上应用店提交您的扩展程序

对扩展程序感到满意后，您可以前往 Chrome 网上商店并提交它。

在 Chrome 开发者商店中，点击New item ，然后将项目文件拖放到上传器中。

Chrome 会询问一些问题，以请求有关其权限以及为什么需要这些权限的信息。

谷歌浏览器扩展示例

似乎一切都有扩展。以下是一些最有用的：

保存到云端硬盘
此扩展程序在浏览器顶部安装了一个小图标。它会将您正在浏览的任何内容发送到您的驱动器帐户，以便您稍后查看。它通过截屏、保存图像、音频或视频来工作。
排序
该插件为用户提供了一种组织收件箱并确定对他们最重要的内容的优先级的方法。它与 Gmail 集成，使您能够将邮件拖放到自定义列中。
HTTPS 无处不在
此扩展通过将任何网站从 http 更改为安全 HTTPS 来增强您浏览的安全性，因此它是加密和安全的。
我不在乎饼干
每个网站都要求您同意 cookie，此扩展程序是救命稻草。它可能看起来不多，但会在 cookie 弹出窗口上点击同意按钮。它将节省您的时间并提高您的工作效率。
速度测试

这个有用的扩展可以让你在旅途中检查你的连接速度。使用桌面和移动版本，您可以在下载大型附件或流式传输视频之前确保您的连接处于最佳状态。
只需单击一下，Speedtest 就会对您正在使用的网络进行快速连接测试。

您的 Chrome 扩展程序可以做什么？

定制扩展是执行单个任务的软件程序。话虽如此，您可以包含多个功能，但请记住，一切都需要运行才能实现相同的目的。

Chrome 扩展通过使用页面操作或浏览器操作来工作：

页面操作：这是特定于某些页面的操作。

浏览器操作：无论您在哪个页面上都是相关的。

确保用户界面用户友好且易于理解。最终交付物将是用户可以下载和安装的软件包。

5 种久经考验的从扩展中赚钱的方法

扩展的主要目标是产生收入。一旦定义了目标受众以及他们将如何使用扩展程序，您就可以制定如何从中赚钱的策略。我们编写了关于扩展货币化的详尽指南。以下是一些亮点：

1. 应用内广告

应用内广告是通过扩展获利的最常见方式之一。这些是在用户使用您的扩展程序时向他们展示的广告。当您通过程序化解决方案通过应用内广告获利时，它会轮换广告。与静态广告不同，此技术可帮助您最大限度地发挥潜力。通过使用展示广告，您可以混合不同类型的广告。

CodeFuel 用户可以最大化他们的收益并简化他们的货币化，因为该服务会显示与用户意图相关的广告。

立即使用 CodeFuel 开始通过您的扩展获利。

2. 搜索广告

这是一种将广告放置在搜索引擎结果页面上的策略。因为广告会在人们寻找某物时出现，所以不会影响用户体验。您可以根据用户意图自定义搜索广告，从而增强用户体验。

3. 应用内支付和购买

在此模型中，扩展是免费的，但您需要为内部功能付费。应用内购买在游戏应用程序和扩展程序中很常见。用户选择是否要添加额外的付费功能。

4. 付费升级

同样，在此模型中，基本扩展是免费提供的，但如果用户想要高级版本，则需要为升级版本付费。这是一个非常常见的模型，被像 Grammarly 这样的流行扩展使用。

5. 免费增值

这可能是扩展和应用程序最流行的货币化模式。通过免费增值，您可以免费提供扩展。你如何从中赚钱？你有几个选择：

您可以在有限的时间内提供免费试用。
您可以提供功能有限的免费基本版本。

如果您选择此模型，请考虑其限制，因为 Google 已停止付费扩展。

谷歌浏览器最好的安全扩展：

大多数人使用 Chrome 进行从购物、搜索到管理财务账户的所有事情。所有这些敏感数据都需要保护。有几个扩展可以使这些信息保持安全。

1. Avast 在线安全

此扩展将通过多种功能涵盖您的网络浏览的安全性。它的网络钓鱼攻击保护扫描任何网页的元素，并检测该页面是假的还是可疑的。 其他有价值的功能包括使用社区评级系统来检测危险站点。

2. 模糊

有许多可用的密码管理器，这是确保所有凭据安全的必要条件。 Blur 是最安全的一种，因为它具有额外的安全功能。

Blur加密、保存和管理您的密码。它还会从购物网站隐藏您的信用卡信息，并阻止所有类型的跟踪器，包括非 cookie 的跟踪器。

3.点击并清理

它是一种清理工具，只需单击一下即可清除您在线活动的所有痕迹。 扩展按钮将清除所有在线历史记录、cookie、缓存、保存的 URL、Web SQL 数据库，甚至是临时文件。 Click and Clean 具有内置的反恶意软件，甚至可以自定义删除某些类型的数据。

4.紧急按钮

此扩展程序可帮助您通过单击关闭所有已打开的内容。如果您正在处理敏感的事情并且未经授权的人靠近，这将很有帮助。单击紧急按钮时，所有选项卡将立即关闭并存储在书签文件夹中。

5.幽灵

如果您想保护您的在线隐私或控制跟踪器，此扩展程序可以成为解决方案。 Ghostery 可让您控制跟踪器，以便您决定阻止或取消阻止哪些跟踪器。它还使您能够阻止对特定类型的跟踪。

CodeFuel 如何帮助您最大限度地提高扩展的产量

使用 CodeFuel 将您的扩展货币化提升到一个新的水平。我们完整的货币化平台为您的数字资产（包括浏览器扩展）提供基于意图的货币化。

该解决方案利用机器学习为用户提供高度相关的购物和文字广告，并根据意图进行定制。与其他解决方案不同，CodeFuel 使您能够灵活地使用多个广告网络，例如 Bing 和 GoogleAdSense。立即开始使用 CodeFuel 最大限度地提高您的扩展产量。

如果 Chrome 扩展程序冻结，如何修复它？

您正在使用 Chrome 扩展程序，突然浏览器冻结。多么令人沮丧。这并不常见，但它会发生。如果 Chrome 崩溃或死机，您将收到一条说明错误类型的错误消息，例如代理错误或网页不可用。

Chrome 帮助列出了许多故障排除提示：

关闭其他选项卡和应用程序
重启浏览器
检查恶意软件
测试网络是否存在问题
如果您的扩展程序导致与 Chrome 发生冲突，请按照以下说明操作：

点击右上角的更多 设置。
在底部，单击高级。
单击重置并清理 更新或删除不兼容的应用程序。
如果您没有看到此选项，则说明应用程序没有问题。
决定是否要更新或删除列表中的每个应用程序。
打开计算机的应用商店并检查更新。

常问问题

您可以向用户收取 Chrome 扩展程序的费用吗？
2020 年，谷歌关闭了 Chrome Web Store 上的付费 Chrome 扩展程序。这意味着您不再可以在 Chrome 商店中为您的扩展程序收费。您可以使用其他平台。
Chrome 扩展程序是否收费？
2020 年，谷歌关闭了 Chrome Web Store 上的付费 Chrome 扩展程序。这意味着您不再可以在网上商店中为您的扩展程序收费。您可以使用其他平台。
如何发布 Chrome 扩展程序？
准备好扩展程序后，请按照以下说明将其发布到 Chrome 商店：
1. 创建您的 zip 文件
2. 创建并设置开发者帐户
3. 上传扩展
4. 为您的列表添加资产
5. 提交您的项目以进行发布
如何改善用户体验并获得更多转化？
这是一个远离此问题范围的广泛主题，但这里有一些基本原则：
1. 保持扩展的导航简单
2. 提供良好的客户支持
3. 让您的扩展易于使用
4. 确保它不会增加浏览器内存消耗
5. 简化 Google 用户的登录
哪些技术用于为 Chrome 编写扩展程序？
扩展由不同的组件组成，使用多种 Web 开发技术创建。最流行的是 HTML、CSS 和 JavaScript。
扩展程序可以在呈现的网页之外创建 UI 吗？
根据 Chrome 开发者的页面，是的，扩展程序可能会在浏览器界面中添加按钮。扩展程序还可以创建弹出通知。
扩展可以修改 chrome:// 网址吗？
根据定义，扩展通过使用 API 来修改浏览器行为来扩展浏览器。由于它们是基于网络技术构建的，它们在单独的执行环境中运行并与 Chrome 浏览器交互。
如何为我的扩展构建 UI？