浏览器插件开发-创建自己的启动页

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

前不久在网上看到一个开源项目，某同学开发了一个聚合内容网站，很方便可以看到各个网站目前热点内容，地址是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 自动化了许多繁琐的配置和构建工作，让开发者能更专注于核心功能的实现。