# plasmo_projects

**Repository Path**: his0769/plasmo_projects

## Basic Information

- **Project Name**: plasmo_projects
- **Description**: 用 `plasmo` 开发浏览器插件
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-08
- **Last Updated**: 2025-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Nodejs, Chrome-extension, Chrome, CSS

## README

# plasmo 开发常用命令

`plasmo`: 开发-chorme-扩展的框架



```
# 创建 plasmo 项目， 根据提示输入 （项目名称，项目描述，作者）
# 默认是创建 react react-dom 模板的前端工程
pnpm create plasmo
pnpm create plasmo --with-vue
pnpm create plasmo --with-tailwindcss

# 先进入到项目中, 再执行下面命令启动项目
pnpm dev

# 再将 `d101-hello/build/chrome-mv3-dev` 目录载入到chrome扩展中
# 开发者模式， 加载解压缩的扩展
# 然后就可以看到一个最简单的helloworld扩展，点击，会有一个弹窗出现
```



# create-plasmo 还可以输入哪些参数？

> 经过一番艰苦的探索，找到有用的信息



` https://gitcode.com/gh_mirrors/pl/plasmo ` 国内可以很方便的从这个链接获取源码



`https://github.com/PlasmoHQ/examples/` 这里存放了所有的模板，也就是 `--with-` 可以输入的参数都放在了这里，这个链接 `gitcode` 没有缓存，只能从 github 访问。



----

> 以下是艰苦探索过程的印记



- `create-plasmo` : 要如何配置呢？ 默认是使用 React 和 ReactDom 的， 如何更改为使用 Vue 呢？

```
pnpm config list

cache=D:\repos\npm\npm_cache
prefix=D:\repos\npm\npm_global
store-dir=D:\repos\pnpm\.pnpm-store
```

- 【失败】想从本地目录找到 `create-plasmo` 的相关信息，失败！



```
pnpm create plasmo --help
```

- 上面命令不能执行

```
pnpm help create
```

- `pnpm help create`  ， 此命令可以执行

```
C:/Users/his07/AppData/Local/pnpm-cache
```



```
https://gitcode.com/gh_mirrors/pl/plasmo
```

- 在 `gitcode` 可以找到 `plasmo` ， 此工程下的 `cli/create-plasmo` 应该就是我寻找的目标 (250608)
- 下载代码到本地，经过一番折腾（查找），总算是找到了有价值的信息了

```
pnpm create plasmo --with-vue
pnpm create plasmo --with-tailwindcss

# 在下面链接中有很多示例模板
https://github.com/PlasmoHQ/examples/
```



# 学习笔记

[./d104-custom/ReadMe.md](./d104-custom/ReadMe.md)

上面链接记录了我的学习笔记，如何用 `plasmo` 开发浏览器插件

除了 `plasmo` 还有 `WXT` 也是开发浏览器的框架