Chrome 浏览器扩展开发入门指南
准备工作：启用开发者模式 首先确保已安装 Chrome 浏览器，支持 Windows、macOS 与 Linux 系统。随后进入浏览器设置，点击右上角菜单图标，选择「更多工具」→「扩展程序」。
在扩展管理页面开启「开发者模式」，即可看到加载未打包扩展的选项。
创建基础扩展项目
- 在本地新建一个文件夹，例如命名为
my-first-extension。 - 在该目录中创建一个名为
manifest.json的文件，内容如下：
{
"name": "我的第一个扩展",
"version": "1.0",
"description": "我开发的第一个 Chrome 扩展。",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}
-
将一张 19×19 像素的图标文件
icon.png放入该目录（可从官方示例获取）。 -
点击「加载未打包的扩展程序」，选择刚刚创建的文件夹，完成安装。
此时浏览器工具栏将显示新添加的扩展图标。
增强功能：添加弹窗界面
- 编辑
manifest.json，为browser_action添加popup字段：
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
- 创建
popup.html文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
</head>
<body>
<script>
const xhr = new XMLHttpRequest();
xhr.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello%20world&" +
"safe_search=1&" +
"content_type=1&" +
"sort=relevance&" +
"per_page=20",
true
);
xhr.onload = function () {
const photos = this.responseXML.getElementsByTagName("photo");
for (let i = 0; i < photos.length; i++) {
const img = document.createElement("img");
img.src = constructImageUrl(photos[i]);
document.body.appendChild(img);
}
};
xhr.send();
function constructImageUrl(photo) {
return `http://farm${photo.getAttribute("farm")}.static.flickr.com/${photo.getAttribute("server")}/${photo.getAttribute("id")}_${photo.getAttribute("secret")}_s.jpg`;
}
</script>
</body>
</html>
-
回到扩展管理页面，重新加载该扩展以应用更改。
-
点击扩展图标，即可查看从 Flickr 加载的图片列表。
⚠️ 注意：首次加载可能延迟，若图标保持悬停状态，说明正在执行脚本，无需担心。
打包发布扩展
当开发完成，可点击「打包扩展程序」按钮，选择扩展目录，生成 .crx 安装包，用于分发或上传至 Chrome 应用商店。
