初识插件：从 “Hello World” 迈入 Chrome 扩展之门
什么是谷歌浏览器插件？
官方定义：Chrome 扩展程序可通过自定义界面、监控浏览器事件和修改网页来提升浏览体验。
简单来说就是是能给 Chrome 浏览器 “加装” 各种小功能的工具。它就像给浏览器安上不同的 “小零件”，有的能帮你拦截广告，有的能翻译外文网页，…… 总之，就是根据你的需求，让浏览器更好用、更符合你的使用习惯。
Hello World 带你快速入门
📁 搭建项目结构
首先，在本地创建一个用于存放扩展代码的文件夹，例如命名为 hello-extension，这个文件夹将成为你扩展的“家”。
🧩 编写核心配置：manifest.json
在该文件夹下面创建一个名为manifest.json 的文件（ 这是扩展程序的核心配置文件，定义了插件的基本信息和功能权限，非常重要 ）。
{
"name": "Hello Extensions",
"description": "我的第一个chrome插件尝试",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html",
"default_icon": "/assets/icon.png"
}
}
🎨 添加视觉标识：图标资源
在项目中新建 assets 文件夹，将一张尺寸为 16×16、32×32 或 48×48 像素的 PNG 图标文件命名为 icon.png 并放入其中（可以去iconfont上去下载）。该图标将在浏览器工具栏中展示，是用户识别你插件的第一印象。
💬 设计交互界面：弹出窗口（Popup）
当用户点击插件图标时，我们希望展示一个简洁的欢迎界面。为此，创建一个名为popup.html的文件，并添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
现在，当用户点击扩展程序的操作图标（工具栏图标）时，该扩展程序会显示一个弹出式窗口。我们可以通过在本地加载该测试页面来测试它。
🔌 加载并测试你的扩展
Now, it's time to witness the results，在新标签页中输入 chrome://extensions 即可前往“扩展程序”页面，或者点击“扩展程序”菜单拼图按钮，然后选择菜单底部的管理扩展程序。
点击开发者模式旁边的切换开关，即可启用开发者模式。点击加载已解压缩的文件按钮，然后选择扩展程序所在的文件夹即可（选到文件夹层次止步，不需要点进去）。
效果展示
扩展小知识 ✨
Microsoft Edge 同样基于 Chromium 内核，因此绝大多数 Chrome 扩展可直接在 Edge 中加载使用，生态高度兼容。
从零探索Chrome插件开发，手把手教你构建实用功能，开启浏览器扩展创作之旅。
