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

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

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

相关推荐
阿珊和她的猫20 分钟前
动态指令参数:根据组件状态调整指令行为
前端·javascript·vue.js
xiegwei22 分钟前
vue+element 导航 实现例子
前端·javascript·vue.js
露临霜2 小时前
vue实现AI问答Markdown打字机效果
前端·javascript·vue.js·ai·github
愛芳芳2 小时前
springboot+mysql+element-plus+vue完整实现汽车租赁系统
前端·vue.js·spring boot·后端·mysql·elementui·汽车
m0_zj3 小时前
55.[前端开发-前端工程化]Day02-包管理工具npm等
前端·npm·node.js
xcLeigh5 小时前
HTML5好看的水果蔬菜在线商城网站源码系列模板9
java·前端·html5·网页源码
星仔_X6 小时前
硬件加速模式Chrome(Edge)闪屏
前端·chrome·edge
2501_915373886 小时前
使用 Vue + Axios 构建与后端交互的高效接口调用方案
前端·vue.js·交互
莫问alicia8 小时前
react + antd 实现后台管理系统
前端·react.js·前端框架·antd
七灵微10 小时前
ES6入门---第三单元 模块三:async、await
前端·javascript·es6