Chrome 插件框架 Plasmo 基本使用示例

📦 1. 安装 Plasmo

在项目目录下运行：

npm create plasmo@latest

按照提示选择：

• Name: your-extension
• Extension Type: Chrome (or multiple browsers)
• TypeScript: 推荐 Yes
• Manifest Version: MV3
• Use React: Yes（Plasmo 推荐）

完成后会生成一个 Plasmo 扩展工程。

---

🧩 2. 创建一个最简单的 Popup UI（弹出页）

在 popup.tsx 编辑：

function Popup() {return (<div style={{ padding: 16 }}><h1>Hello Plasmo!</h1><p>这是你的第一个 Plasmo 扩展。</p></div>)
}export default Popup

运行：

npm run dev

Plasmo 会自动生成浏览器扩展，并让你在开发者模式下安装。

---

🧲 3. 创建一个 Content Script（注入到网页的脚本）

新建文件：content.ts

console.log("Plasmo content script running!")window.addEventListener("click", () => {console.log("你点击了页面！")
})

Plasmo 会自动把它加入 manifest，无需你配置 manifest.json。

---

🔥 4. 与页面进行 DOM 操作

// content.ts
const banner = document.createElement("div")
banner.innerText = "Hello from Plasmo!"
banner.style.cssText = `position: fixed;top: 20px;left: 20px;padding: 10px 20px;background: black;color: white;border-radius: 8px;z-index: 999999;
`
document.body.appendChild(banner)

---

🔄 5. Background Service Worker（后台脚本）

创建 background.ts：

chrome.runtime.onInstalled.addListener(() => {console.log("扩展已安装！")
})chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {if (msg.type === "PING") {sendResponse({ text: "PONG" })}
})

---

🔗 6. Content Script 与 Background 交互

content.ts：

chrome.runtime.sendMessage({ type: "PING" }, (response) => {console.log("后台回复：", response.text)
})

---

🎉 7. 打包扩展

npm run build

打包后输出在 build/ 目录。

---

📚 完整最小示例结构

my-plasmo-extension/
├─ popup.tsx
├─ background.ts
├─ content.ts
├─ package.json
└─ plasmo.config.mjs

这就是一个可运行的 Plasmo 扩展最小示例。