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

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

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

相关推荐
pianmian15 小时前
3D Tiles高级样式设置与条件渲染(3)
linux·服务器·前端
资深前端之路5 小时前
vue+threeJs 绘制3D圆形
前端·javascript·vue.js
Nymph_Zhu5 小时前
vue3+element-plus el-date-picker日期、年份筛选设置本周、本月、近3年等快捷筛选
前端·vue.js·elementui
极客密码6 小时前
DeepSeek-R1-0528,官方的端午节特别献礼
前端·ai编程·deepseek
打小就很皮...6 小时前
npm、pnpm、yarn使用以及区别
前端·npm·yarn
FungLeo6 小时前
vue2 + webpack 老项目升级 node v22 + vite + vue2 实战全记录
前端·webpack·vue2·vie·webpack 升级 vite
西洼工作室6 小时前
使用原生前端技术封装一个组件
前端·js
xiaofann_6 小时前
【数据结构】单链表练习
linux·前端·数据结构
烛阴7 小时前
为什么选择Day.js?比Moment.js更轻更快的日期处理神器
前端·javascript
moyu847 小时前
从 XMLHttpRequest 到 Fetch:AJAX 请求的演进与最佳实践
前端·javascript