wxt谷歌插件开发-图文教程①wxt开发浏览器插件教程，浏览器插件开发，谷歌浏览器开发，一键打包成Chrome, Fir

▍PART 序

本文主要内容①本地初始化wxt项目/②wxt引用.scss的样式
node 版本至少要>=18.20.3 。雪狼本地是node v20.13.1
你要是还不会安装多个node版本的小伙伴，可以看这篇=》node 多版本管理 nvm-window(适用win7 win10)
选wxt主要因为他可以vite+vue3+scss来开发
雪狼一直是原生开发的谷歌插件，所以其实用wxt比较没压力。
下一章教程看文章结尾
如果文章有说错的地方，小伙板指出后，我也会在公众号这篇文章wxt谷歌插件开发-图文教程①评论区回复

▍PART 本地初始化wxt项目

记得先切换到node v20.13.1

记得用cmd来打开，别用git工具！！！！！！

先cd到你新建的文件夹下

f:
cd F:\work\egg-demo\test\wxt

如果你是npm来新建项目，你直接输入下面代码

npx wxt@latest init

然后随便起个文件名比如：wxtVue 然后按回车

然后键盘方向键↓选框架vue ，回车。

这一步，如果你是git工具，你方向键是选不了哈！

这是第一个坑

然后选中npm 回车,科学上网记得开！

不然到时候 npm run dev跑不起来你都不知道哪里有问题。

好了，来，跟着她的提示，安装依赖

cd wxtVue                                                                                                15:27:04
npm install	                                                                                           15:27:04

然后我们vscode打开文件夹，这三个就是我们谷歌插件主要的三个文件了

你记得先安装谷歌浏览器

我们运行下,她会自动弹出浏览器，

npm run dev

然后你要手动去点谷歌浏览器的扩展插件

这样我们就成功本地初始化wxt了。

▍PART 引用.scss样式

他是支持，不是集成！你懂我的意思吗？

所以你还是得装下依赖

npm install sass --save-dev

下完后，你在npm run dev

全局引入scss、

popup 里要用.scss你就，先新建个a.scss

a.scss

.a1{
  font{
    color:red;
  }
}

然后app.vue加个代码

<p class="a1">
  <font>公众号：程序员野区</font>
</p>

然后记得main.ts 要引入

import './a.scss';

局部引用scss

<style scoped lang="scss">
.a1{
  font{
    color:blue;
  }
}

局部就直接，引用就好了

这个是popup部分的，我知道你可能还有很多疑问，我写完下一章的教程会放在本文章底部评论区。

当然，你要是卡其他问题，关注公众后回复“加群”来问雪狼，

因为雪狼本身原生谷歌插件开发过，vue3也玩，所以其实很多时候可能你卡住的点，对我来说是理所当然，就没记录下来文章里。

▍PART wxt谷歌插件开发（系列）

第①章、第②章、第③章、陆续更新中

▍PART 微信群聊机器人（系列）

第①章、第②章、第③章、第④章、第⑤章、第⑥章、第⑦章、第⑧章、第⑨章、第⑩章、第⑪章、第⑫章、第⑬章、第⑭章、第⑮章

▍PART 扩展阅读

▍PART 公众号合集

#程序员干货

#前端回忆录