Chrome 扩展开发实战:PoetryTab 新标签页实现
最近在做浏览器扩展的小练习,想给新标签页加点诗意。这里整理了一个基于原生 JavaScript 的 Chrome 扩展案例,核心功能是从后端接口拉取诗词并展示在页面中。整个过程涉及 Manifest 配置、HTML 结构搭建以及 Ajax 请求封装,适合用来理解浏览器扩展的基本交互流程。
1. 配置文件 manifest.json
这是扩展的入口文件,主要声明了版本、名称以及最重要的 chrome_url_overrides。通过它,我们可以覆盖浏览器的默认新标签页行为。
{
"manifest_version": 2,
"name": "PoetryTab",
"version": "2.0",
"description": "PoetryTab:为你的浏览增加诗意",
"icons": {
"16": "img/logo.png",
"48": "img/logo.png",
"128": "img/logo.png"
},
"chrome_url_overrides": {
"newtab": "PoetryTab.html"
}
}
注意这里使用了 manifest_version: 2,虽然新版已转向 v3,但 v2 对于理解基础逻辑依然足够。图标路径需要确保实际存在,否则会影响扩展安装后的显示效果。
2. 页面结构 PoetryTab.html
页面本身就是一个标准的 HTML5 文档。为了适配移动端或不同屏幕,我们加了 viewport meta 标签。内容区域很简单,一个标题和诗词内容的容器。


