plasmo-co-learn

本次共学使用 plasmo 完成一个浏览器扩展。构建独立自主的轻量web3接入解决方案。 一种web3接入方案，比纯客户端轻量，比纯网页丰富，介于两者之间的一种web3 接入方案。

前置需求

1. 熟悉至少一种编程语言
2. 熟悉至少一种前端架构 : React, Vue 等
3. 熟悉 pnpm, yarn 等前端操作工具链

module1

Plasmo 介绍 熟悉浏览器扩展和Plasmo、搭建开发环境、及其简单的React入门。

1. 环境搭建，浏览器扩展各个模块
2. 前端 React 基础

module2

浏览器扩展页面 熟悉浏览器扩展各个页面的开发、掌握独立交互扩展的构建能力。

1. 开发工作流
2. extension pages (tab page, popup page, option page, new tab page, devtool)
3. tab pages
4. sandbox pages

module3

内容脚本 熟悉在页面当中嵌入脚本和UI组件。

1. content scripts
2. content scripts ui

module4

模块间通信 掌握模块(background、content pages、popup page)间通信的技巧,

1. background sw
2. message
3. storage
4. remote code

module5

项目周，项目举例

1. 内容加载交互，在浏览器内网完成数据的管理，比如TODO 项目。书签管理，比如 天气预报这些。
2. 加密钱包项目 (sui, aptos, solana) 等
3. 网页增强工具 (扩展 github 的功能，网页浏览加入gpt的交互)等

参考资料：

1. plasmo 官方文档
2. 使用 plasmo的参考示例
3. Google Chrome 模块开发文档
4. 火狐浏览器扩展开发文档
5. 像素风格 UI 类库
6. chrome 官方扩展实例