Plasmo 开发浏览器插件

Welcom to Plasmo FrameWork

System Requirements

• Node.js 16.14.x or later
• macOS, Windows, or Linux
• (Strongly Recommended) pnpm

Getting Start

• 快速开始
• 使用src目录

快速开始

1、初始化项目，然后根据提示填写项目相关信息即可创建成功

pnpm create plasmo  --with-sidepanel

2、项目目录分析

├── .github/        // 用于自动部署的 GitHub Actions 工作流程
├── assets/         // Plasmo 会自动生成较小的图标
├── .gitignore      // Git 忽略文件
├── .prettierrc.cjs // 实现代码样式一致性
├── package.json
├── sidepanel.tsx   // 此文件导出一个默认的 React 组件，该组件将呈现到浏览器侧边
├── README.md
├── tsconfig.json   // TypeScript 配置

3、允许sidepanel

注意： 如果使用plasmo sidepanel模板创建的项目能打开侧边栏，请忽略这一步

项目目录创建一个background.ts 或者background/index.ts,然后添加如下代码

chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })

检查package.json(或者manifest.json)文件中是否允许了sidePanel 权限

{
  ...
  ...
    "manifest": {
+   "permissions": ["sidePanel"],
    "host_permissions": [
      "https://*/*"
    ]
  }
}

4、开发版本

pnpm dev   // 启动开发服务器，用于实时重新加载和 HMR

5、生产发布版本，将在 build/chrome-mv3-prod 中创建扩展的生产版本

pnpm build

6、使用Chorme加载扩展

• 浏览器地址栏输入 chrome://extensions,前往插件管理页面，然后启用开发人员模式（页面右上角有Developer mode开启按钮）。

• 点击浏览器左侧的 "Load unpacked" 按钮，选择生成的插件目录 build/chrome-mv3-dev 或者 build/chrome-mv3-prod

• 点击浏览器地址栏右侧的插件工具按钮，找到对应的插件，单机即可运行plasmo插件

使用src目录

使用plasmo创建的项目，默认代码和配置都放在项目根目录，不利于分类管理代码，可以将代码移动到src目录

方法一：自动创建带有src的项目

pnpm create plasmo --with-src   // 适用于初始创建项目

方法二：手动设置

1、项目根目录创建src目录，然后将所有源代码的文件/目录都移动到src目录

• 请确保 assets 目录在 project 目录下，而不是 src 目录下
• 请确保所有源文件（包括 Plasmo 的入口文件，如 popup.tsx、options.tsx、background.ts、contents/* 等）都在 src 目录中
• 不要随意修改约定的文件名字，例如popup.tsx、option.tsx、background.ts，这些plasmo约定的模块名，可以导出对应的html文件

2、修改tsconfig.json,将 ~* 前缀的解析路径指向 ./src/*

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
-      "~*": ["./*"]
+      "~*": ["./src/*"]
    },
    "baseUrl": "."
  }
}