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 扩展最小示例。