后端开发教程 - Java、Spring Boot 实战 - msg200.com
创建一个简单的 Chrome 扩展程序
关于扩展
让我们开始编码吧！
结论
最近我决定学习一下Chrome 扩展程序，在阅读了文档并构建了几个示例扩展程序后，我惊讶地发现一个非常简单的扩展程序构建速度竟然如此之快，而且非常有趣。真希望我早点尝试一下。
在本文中，我将逐步解释如何创建一个简单的扩展。
关于扩展
本文要构建的扩展只是我构思的一个简单示例（灵感来自我的狗狗 Acho 🐶）。我们将通过点击浏览器工具栏上的扩展按钮来询问 Acho“我们在哪里？”，Acho 会告诉我们当前标签页中加载的页面名称。
这是扩展运行的 gif：
让我们开始编码吧！
1.创建清单
manifest.json我们将在该文件中描述我们的应用程序：其名称、描述、权限等。
我们的清单看起来是这样的（目前）：
{
"manifest_version": 2,
"name": "Acho, where are we?",
"version": "0.1.0",
"description": "Ask Acho where you are and he'll bark the page title at you."
}
那么这到底是什么？让我们看看：
manifest_version（必需）：这是我们的扩展程序所需的清单文件格式。对于 Chrome 的最新版本，我们应该使用版本 2，但请记住，Manifest v3即将针对 Chrome 88 推出。版本 1 已弃用。name（必填）：我们的扩展的名称。version（必需）：代表我们扩展的当前版本的字符串。description（可选但推荐）：我们的扩展的简短描述。
当我们的扩展成形时，我们将稍后更新我们的清单。
2. 在 Chrome 中加载扩展程序
现在我们有了有效的 Manifest 文件，就可以在 Chrome 中加载我们的扩展程序了。具体步骤如下：
- 打开 Chrome
- 导航至
chrome://extensions - 打开“开发者模式”开关（位于屏幕右上角）
- 点击左侧出现的“加载解压文件”按钮
- 选择我们的扩展文件夹
现在，我们可以在列表中看到我们的扩展程序，其中包含我们在清单中定义的名称和描述。当然，由于我们还没有添加任何逻辑，所以我们目前只能对扩展程序进行这些操作，所以让我们继续。
3. 创建弹出窗口
3.1 更新 manifest.json
首先，我们应该更新清单文件，添加对弹窗的引用。我们需要添加browser_actionand permissions，如下所示：
{
"manifest_version": 2,
...
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"24": "images/icon24.png",
"32": "images/icon32.png"
},
},
"permissions": [
"tabs"
]
}
browser_action：使用浏览器操作将在浏览器的工具栏上为我们的扩展创建一个按钮，并允许我们为该按钮添加一个图标以及单击时出现的弹出窗口。default_popup：在这里我们将声明弹出窗口的文件名。default_icon（可选）：不同尺寸的图标列表（chrome 将选择最适合用户设备的图标）
permissions：我们需要声明使用 Chrome API 执行某些操作所需的权限。在本例中，我们将声明该tabs权限，因为我们需要获取当前标签页的标题。
3.2 创建popup.html
创建一个名为 的新文件，popup.html我们将在其中设计当用户点击扩展程序按钮时出现的弹出窗口。它应该如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Acho, where are we?</title>
<link href="popup.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id="dialog-box"></p>
<img id="acho" src="images/acho-bark.png" alt="Acho the pup">
<script src='popup.js'></script>
</body>
</html>
如您所见，我们的popup.html包含以下主要元素：
<p id="dialog-box">我们将在此段落中写下 Acho 的答案。- 阿乔 (Acho) 吠叫的图像
<img id="acho" ...>。 <link href="popup.css" ...>在这里我们将为弹出窗口添加一些样式。<script src='popup.js'>我们的扩展逻辑就在这里。
现在让我们在中添加一些CSS popup.css。创建文件并添加以下代码：
#acho {
display: block;
margin: auto;
}
#dialog-box {
text-align: center;
font-size: medium;
}
我们还没有添加任何逻辑，所以 Acho 无法告诉我们当前位置。让我们解决这个问题！
4. 向弹出窗口添加逻辑
要将逻辑添加到我们的弹出窗口，请创建popup.js文件并添加以下代码：
document.addEventListener('DOMContentLoaded', () => {
const dialogBox = document.getElementById('dialog-box');
const query = { active: true, currentWindow: true };
chrome.tabs.query(query, (tabs) => {
dialogBox.innerHTML = getBarkedTitle(tabs[0].title);
});
});
const getBarkedTitle = (tabTitle) => {
const barkTitle = `${getRandomBark()} Ahem.. I mean, we are at: ${tabTitle}`
return barkTitle;
}
const barks = [
'Barf barf!',
'Birf birf!',
'Woof woof!',
'Arf arf!',
'Yip yip!',
'Biiiirf!'
]
const getRandomBark = () => {
const bark = barks[Math.floor(Math.random() * barks.length)];
return bark;
}
上述代码会等待内容加载完毕，然后使用该 chrome.tabs.query方法获取当前活动的 tab。之后，我们提取 tab 的 Title ，并为了好玩，将其与随机选择的吠叫声连接起来。最后，将完整的字符串添加到 popup 段落 中#dialog-box。
就这样！我们的扩展完成了🙌
结论
在本文中，我们通过仅使用 HTML、CSS 和 JavaScript 创建一个非常简单的 Chrome 扩展程序，学习了Chrome 扩展程序的基础知识。希望对您有所帮助！
检查该项目的 repo：
pawap90 / acho-我们在哪里
Acho（一只可爱的小狗）会告诉你浏览器当前页面的标题。这是一个 Chrome 扩展程序示例。
请在评论中告诉我你的想法！
这是我为这个扩展创作的灵感来源 Acho 的照片：
如果有人有兴趣使用 Svelte 构建他们的扩展，这里有一个带有样板的精彩指南：