WXT浏览器开发中文教程(1)----安装WXT

前言

大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!

欢迎来到 WXT!

WXT 是一个现代的、开源的框架,用于构建网页扩展。它受到 Nuxt 的启发,其目标是:

查看 比较 以了解 WXT 与其他用于构建网页扩展的工具的对比。

前提条件

这些文档假设您对网页扩展的结构以及如何访问扩展 API 有一定的了解。

如果您是扩展开发的新手?

如果您从未编写过扩展,请先按照 Chrome 的 Hello World 教程 创建一个不使用 WXT 的扩展,然后再回到这里。

您还应该熟悉 Chrome 的扩展文档Mozilla 的扩展文档。WXT 并不改变您使用扩展 API 的方式,因此在使用特定 API 时,您需要经常参考这些文档。

如果您已经对网页扩展的结构有了基本的了解,并且知道如何访问扩展 API,那么让我们安装WXT来创建您的第一个 WXT 扩展。

安装

启动一个新项目,从头开始,或迁移现有项目。

启动项目

运行init命令,并按照说明进行操作。

如果您使用pnpm,那么如下命令可以初始化wxt项目:

sh 复制代码
pnpm dlx wxt@latest init

如果您使用Bun,那么如下命令可以初始化wxt项目:

sh 复制代码
bunx wxt@latest init

如果您使用npm,那么如下命令可以初始化wxt项目:

sh 复制代码
npx wxt@latest init

如果您使用yarn,那么如下命令可以初始化wxt项目:

sh 复制代码
# 初始使用 NPM,但在提示时选择 Yarn
npx wxt@latest init

启动模板:

所有模板默认使用 TypeScript。若要使用 JavaScript,请更改文件扩展名。

演示

运行dev命令后,继续下一步

从头开始

  1. 创建一个新项目

    如果您使用pnpm,那么如下命令可以创建一个新项目:

    sh 复制代码
    cd my-project
    pnpm init

    如果您使用bun,那么如下命令可以创建一个新项目:

    sh 复制代码
    cd my-project
    bun init

    如果您使用npm,那么如下命令可以创建一个新项目:

    sh 复制代码
    cd my-project
    npm init

    如果您使用yarn,那么如下命令可以创建一个新项目:

    sh 复制代码
    cd my-project
    yarn init
  2. 安装 WXT:

    如果您使用pnpm,那么如下命令可以安装WXT:

    sh 复制代码
    pnpm i -D wxt

    如果您使用bun,那么如下命令可以安装WXT:

    sh 复制代码
    bun i -D wxt

    如果您使用npm,那么如下命令可以安装WXT:

    sh 复制代码
    npm i -D wxt

    如果您使用yarn,那么如下命令可以安装WXT:

    sh 复制代码
    yarn add --dev wxt
  3. 添加入口文件,my-project/entrypoints/background.ts

    ts 复制代码
    export default defineBackground(() => {
      console.log('Hello world!');
    });
  4. 添加脚本到你的package.json

    package.json

    json 复制代码
    {
      "scripts": {
        "dev": "wxt", 
        "dev:firefox": "wxt -b firefox", 
        "build": "wxt build", 
        "build:firefox": "wxt build -b firefox", 
        "zip": "wxt zip", 
        "zip:firefox": "wxt zip -b firefox", 
        "postinstall": "wxt prepare"
      }
    }
  5. 以开发模式运行你的扩展

    如果您使用pnpm,那么如下命令可以开发模式运行你的扩展:

    sh 复制代码
    pnpm dev

    如果您使用bun,那么如下命令可以开发模式运行你的扩展:

    sh 复制代码
    bun run dev

    如果您使用npm,那么如下命令可以开发模式运行你的扩展:

    sh 复制代码
    npm run dev

    如果您使用yarn,那么如下命令可以开发模式运行你的扩展:

    sh 复制代码
    yarn dev

    WXT 将自动打开一个浏览器窗口,并且自动安装了你的扩展。

    最后感谢阅读!欢迎关注我,微信公众号倔强青铜三。欢迎点赞收藏关注,一键三连!!!

相关推荐
咔咔咔索菲斯7 分钟前
Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
前端·javascript·vue.js
前端小咸鱼一条8 分钟前
Vue响应式原理一:认识响应式逻辑
前端·javascript·vue.js
程序员秘密基地8 分钟前
基于html,css,vue,vscode,java,springboot,mysql数据库,在线考勤,管理系统
java·vue.js·spring·html·web app
paopaokaka_luck34 分钟前
基于Spring Boot+Vue的巴彦淖尔旅游网站(AI问答、腾讯地图API、WebSocket及时通讯、支付宝沙盒支付)
数据库·vue.js·spring boot·websocket·mysql·毕业设计·旅游
初心w50t239 分钟前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
{⌐■_■}40 分钟前
【软件工程】tob和toc含义理解
前端·数据库·mysql·golang·软件工程·tidb
码农捻旧1 小时前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
kk_stoper1 小时前
使用Ruby接入实时行情API教程
java·开发语言·javascript·数据结构·后端·python·ruby
浏览器API调用工程师_Taylor2 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫