零基础开发马拉松配速插件
想要拥有一个专属的浏览器工具吗？本文将手把手教你如何利用 Gemini 的强大代码能力，从零开始开发一款 Chrome 浏览器扩展插件。我们将以实用的“马拉松配速计算器”为例，带你走过完整的开发流程：从创建项目、配置核心的 Manifest V3 文件，到编写界面的 HTML，再到实现计算逻辑的 JavaScript，最后教你如何在浏览器中加载并运行。无论你是想快速构建工具的极客，还是纯粹的技术爱好者，这篇实战教程都能让你轻松上手，立刻体验开发的乐趣！
制作一个真正能够运行的工具是学习扩展开发的最佳方式。让我们来构建一个简单的马拉松配速计算器扩展程序。它会驻留在你的 Chrome 工具栏中，点击后会弹出一个小窗口，你可以输入目标完赛时间，瞬间就能看到所需的每公里配速。
以下是从零开始构建并运行它的详细步骤：
1. 创建项目文件夹
首先，在你的电脑上创建一个新的空文件夹，可以命名为 marathon-pace-ext。我们接下来创建的所有文件都将直接保存在这个文件夹中。
2. 搭建基础结构 (manifest.json)
每个 Chrome 扩展都必须包含这个文件。它就像是你扩展程序的身份证，告诉 Chrome 它是做什么的以及需要哪些权限。
在你的文件夹中创建一个名为 manifest.json 的文件，并粘贴以下代码：
{
"manifest_version": 3,
"name": "Marathon Pace Calculator",
"version": "1.0",
"description": "Quickly calculate your required pace for a marathon.",
"action": {
"default_popup": "popup.html",
"default_title": "Calculate Pace"
}
}
3. 构建用户界面 (popup.html)
接下来，我们需要设计点击扩展图标时显示的视觉布局。这其实就是标准的 HTML 代码。
在同一个文件夹中创建一个名为 popup.html 的文件，并粘贴以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
body { width: 250px; padding: 15px; font-family: sans-serif; }
input { width: 50px; margin-bottom: 10px; }
button { width: 100%; padding: 8px; background: #007bff; color: white; border: none; cursor: pointer; }
#result { margin-top: 15px; font-weight: bold; text-align: center; }
</style>
</head>
<body>
<h3>Target Time</h3>
<label>Hours: <input type="number" id="hours" min="2" max="10" value="3"></label><br>
<label>Minutes: <input type="number" id="minutes" min="0" max="59" value="30"></label><br>
<button id="calculate">Calculate Pace</button>
<div id="result"></div>
<script src="popup.js"></script>
</body>
</html>
4. 添加计算逻辑 (popup.js)
现在我们需要让“计算配速”按钮真正发挥作用，进行底层的数学计算。Chrome 扩展对安全性要求很严格，所以你的 JavaScript 逻辑必须放在一个单独的文件中，而不能直接写在 HTML 文件里。
在同一个文件夹中创建一个名为 popup.js 的文件，并粘贴以下代码：
document.getElementById('calculate').addEventListener('click', function() {
// Get the user input
const hours = parseInt(document.getElementById('hours').value) || 0;
const minutes = parseInt(document.getElementById('minutes').value) || 0;
// Calculate total minutes, then divide by marathon distance (42.195 km)
const totalMinutes = (hours * 60) + minutes;
const paceInMinutes = totalMinutes / 42.195;
// Convert the decimal pace into minutes and seconds
const paceMins = Math.floor(paceInMinutes);
const paceSecs = Math.round((paceInMinutes - paceMins) * 60);
// Format seconds to always show two digits (e.g., "05" instead of "5")
const formattedSecs = paceSecs < 10 ? '0' + paceSecs : paceSecs;
// Display the result
document.getElementById('result').innerText = `Pace: ${paceMins}:${formattedSecs} /km`;
});
5. 在 Chrome 中加载并测试
你的代码已经全部完成了！现在我们只需要把它安装到你的浏览器里。
- 打开 Chrome 浏览器，在地址栏中输入
chrome://extensions/并回车。 - 在该页面的右上角，打开开发者模式 (Developer mode) 的开关。
- 左上角会出现三个新按钮。点击加载已解压的扩展程序 (Load unpacked)。
- 选择你在第一步中创建的
marathon-pace-ext文件夹。
你的扩展程序现在已经安装成功了！点击 Chrome 浏览器右上角的“拼图”图标，将你新制作的“马拉松配速计算器”固定在工具栏上，然后点击它亲自测试一下吧。
*如有疏漏，欢迎指正。
欢迎访问>>小札在线<<讨论或在下方留言区分享你的看法或经验！