前面说了怎么开发浏览器插件,今天继续说下怎么创建自己的启动页。

前不久在网上看到一个开源项目,某同学开发了一个聚合内容网站,很方便可以看到各个网站目前热点内容,地址是github.com/ourongxing/...。
这不非常适合上班摸鱼嘛,于是借鉴其项目开发了一个启动页插件,就是摸摸鱼 - Chrome 网上应用店。该插件旨在替代浏览器默认的新标签页,聚合多个新闻、资讯来源的热点信息,让我们在工作、学习间隙快速获取信息流,实现高效"摸鱼"。
新建项目
老样子,还是使用wxt新建项目,
kotlin
pnpm dlx wxt@latest init
配置新启动页
因为我们是要替换新标签页,将 Chrome 打开新标签页(New Tab Page, NTP)的行为覆盖,展示自定义的信息聚合界面。参考wxt开发文档,新建entrypoints/newtab/index.html。同样的,我们使用react,创建并应用app.tsx。
项目结构大概是
diff
-entrypoints
-newtab
-index.html
-main.tsx
-App.tsx
-Block.tsx
-package.json
-tsconfig.json
-wxt.config.ts
开发
现在就可以进行开发了。该同学的项目可以直接部署到cloudflare,我们创建一个cf pages进行部署。但我们仅能使用他的后端api,前端页面还需要继续编写。
- 后端开发;我们在启动页地址明显跟后端接口不是同一个域名,需要跨域。但其原始接口没有处理跨域问题,我们需要稍加修改,兼容跨域。
- 前端开发:参考其UI,简单使用NextUI创建前端页面,在app.tsx中请求接口并渲染,创建一个block.tsx渲染每个网站的热点新闻。
接下来运行调试pnpm dev ,wxt会自动启动一个浏览器并安装上插件,点击新建tab。最终整体效果如下

自动图标:chrome插件需要不同大小图标,比较繁琐。这次使用了一个新的插件@wxt-dev/auto-icons,可以自动生成不同尺寸的图标,非常方便。仅需在wxt.config.tx中新增相关配置即可:
yaml
modules: ['@wxt-dev/module-react', '@wxt-dev/auto-icons'],
autoIcons: {
baseIconPath: 'public/icon-512.png',
grayscaleOnDevelopment: false,
sizes: [16, 32, 48, 96, 128, 256, 512],
},
总结
通过使用 wxt 框架,开发"摸摸鱼"这款 Chrome 新标签页插件的过程变得高效而愉快。wxt 自动化了许多繁琐的配置和构建工作,让开发者能更专注于核心功能的实现。