前言
为什么是做回到顶部按钮这个功能，主要还是因为我在浏览一些常用网页的时候发现，每次滚动到一定位置的时候我想要返回顶部找关键信息的时候，它居然没有！！！这么简单的一个功能，我发现在很多页面上都没有实现，那这可太糟糕了，正好借着这个需求，让我尝试地去了解和实现属于我个人的浏览器插件，不然连点小插件都不会搞,怎么符合程序员的身份。
一、相关资源与基础知识
📌 什么是浏览器扩展？
它是运行在浏览器中的轻量级程序，能为浏览器赋予：
✅ 网页魔改：一键修改页面内容 / 样式
✅ 功能增强：添加翻译、截图、广告拦截等实用工具
✅ 个性定制：打造专属主题、快捷操作手势
✅ 开发调试：辅助前端工程师高效开发
小提示：当开发扩展遇到难以实现的功能时，可以参考其他插件的源码。不过要注意 Manifest 版本问题，不同版本在配置和写法上存在差异。扩展的存储位置通常为 C:\Users\用户名\AppData\Local\Microsoft\Edge\User Data\Default\Extensions，扩展文件夹名称即为插件的 ID，可在浏览器扩展管理中查看。若找不到该路径，可使用 Everything 查找 ID 名称。
二、扩展程序的组成
Chrome 扩展程序由多个组件构成，每个组件都有其独特的作用：
- manifest.json：这是扩展包中最基础且必不可少的文件，它以 JSON 格式描述了扩展程序的功能和配置，必须放置在根目录。
- Service Worker：在 Manifest V3 中，取代了传统的后台页面，负责持续运行、事件监听和与其他组件通信。
- 内容脚本：用于直接注入网页，修改网页内容和样式。
- 工具栏操作：通常表现为浏览器工具栏上的图标，点击后可触发特定操作。
- 侧边面板：提供额外的交互界面。
- DeclarativeNetRequest：用于对网络请求进行声明式处理。
三、快速上手开发回到顶部扩展
1. 创建 manifest.json 文件
首先，创建一个新的目录用于存放扩展程序文件，并在根目录下创建 manifest.json 文件。以下是一个简单的示例：
{
"name": "Scroll Top",
"version": "0.0.1",
// Manifest V3
// https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3?hl=zh-cn
"manifest_version": 3,
"description": "An extension to scroll the page to top.",
// 需要在引用的文件夹路径存放不同尺寸的icon文件，这里为了省事引用的都是同一个文件
"icons": {
"16": "icons/icon.png", // 扩展程序页面和上下文菜单上的网站图标。
"32": "icons/icon.png", // Windows 计算机通常需要此大小。
"48": "icons/icon.png", // 显示在“扩展程序”页面上。
"128": "icons/icon.png" // 在安装和 Chrome 应用商店中显示。
},
// 需要直接注入页面的JS
"content_scripts": [{}],
// 权限申请
// https://developer.chrome.com/docs/extensions/reference/permissions-list?hl=zh-cn
"permissions": []
}
manifest.json 文件详细描述了扩展的基本信息、图标、默认弹出窗口以及权限等内容。你可以参考 manifest.json 键列表 了解更多配置选项。
2. 创建默认弹出对话框文件
创建 popup 文件夹并其中创建 popup.html 文件。该文件的作用是，当用户点击扩展图标时，该html将以弹窗对话框的形式显示。示例代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.popup {
width: 120px;
}
</style>
</head>
<body>
<div class="popup">返回顶部插件</div>
</body>
</html>
然后在manifest.json添加以下配置
"action": {
"default_popup": "popup/popup.html",
"default_title": "这是一个示例扩展"
},
3. 在 Edge 中添加扩展
- 打开扩展管理页面，开启开发人员模式。
- 首次安装扩展时，点击 “加载解压缩的扩展” 按钮，会弹出 “选择扩展目录” 对话框。
- 选择包含扩展源文件的目录，然后点击 “选择文件夹” 按钮。
完成上述步骤后，你创建的扩展将显示在扩展列表中。
4. 创建内容脚本
在扩展程序目录中创建一个名为 content-script 的目录，并在其中创建 scrollTop.js 文件。以下是实现回到顶部功能的代码：
function addStyle(css) {
try {
var style = document.createElement("style");
style.textContent = css;
(
document.head ||
document.body ||
document.documentElement ||
document
).appendChild(style);
} catch (e) {
console.log("Error: env: adding style " + e);
}
}
document.addEventListener("DOMContentLoaded", function () {
addStyle(`.BackToTop {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px;
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
z-index: 1000;
}`);
const button = document.createElement("button");
button.className = "BackToTop";
button.textContent = "Back to Top";
button.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
function handleScroll() {
if (window.scrollY > 300) {
button.style.display = "block";
} else {
button.style.display = "none";
}
}
window.addEventListener("scroll", handleScroll);
document.body.appendChild(button);
});
创建完脚本文件后，需要在 manifest.json 中添加如下配置：
"content_scripts": [
{
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
"js": ["content-script/scrollTop.js"],
// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
"run_at": "document_start"
}
]
完成上述步骤后，在插件管理页面刷新插件，插件即可生效。
打开任意网站，滚动页面到一定高度，你将看到页面上出现一个回到顶部的按钮。
通过以上步骤，你已经成功创建了一个简单的回到顶部扩展。接下来，你可以继续优化和拓展这个扩展，以满足更多需求。
📚参考资料
Chrome 扩展开发
从零实现的Chrome扩展
Chrome插件(扩展)开发全攻略
MDN-浏览器扩展
Content Security Policy
Jquery Api 速查表
