创建项目：

pnpm create plasmo --with-tailwindcss

在浏览器中调试(谷歌浏览器)：

//扩展程序--管理扩展程序(右上角开发者模式打开)
//加载未打包的程序(此时会弹出一个文件夹选择窗口)
//在文件夹选择窗口找到代码文件地址中的“build”--“chrome-mv3-dev”文件夹，点击右下角的“选择”
//这样就添加好了扩展程序

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f0c055b0f1e146d0badbd0050cf5d5b0.png

存储：本地存储的值在浏览器的Application–Extension storage–sync中可以查到。

//popup.tsx
//导入
import { useStorage } from "@plasmohq/storage/hook"

//使用
const [count, setCount] = useStorage<number>("count", 0)

const handleSetCount = async (newCount: number) => {
    setCount(newCount)
  }

<CountButton count={count} setCount={handleSetCount} />


//相应地，src\features\count-button.tsx中也应修改：
interface CountButtonProps {
  count: number
  setCount: (count: number) => void
}

export const CountButton = ({ count, setCount }: CountButtonProps) => {
  const increase = () => {
    const newCount = count + 1
    setCount(newCount)
  }

<button onClick={increase}...>  ...

//存储区域选择

import { Storage } from "@plasmohq/storage"

// Local Storage (默认)
const localStorage = new Storage({ area: "local" })

// Sync Storage (跨设备同步)
const syncStorage = new Storage({ area: "sync" })

// Session Storage (会话级别)
const sessionStorage = new Storage({ area: "session" })

监听：可以监听旧值和新值

//popup.tsx
import { Storage } from "@plasmohq/storage"
const storage = new Storage()

storage.watch(
    {"count":
    (change) => {
      console.log("count changed", change)
    }}
  )

Message API --消息通信

//content.tsx
export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  //这是屏蔽某一网站，在该网站不渲染content.tsx的内容
  exclude_matches: ["https://www.baidu.com/"],
  //默认是MAIN，也可以设置为ISOLATED
  //当是MAIN时，可以拿到当前网页的window对象
  //当是ISOLATED时，内容脚本会在一个独立的执行环境中运行，不会与页面的其他脚本共享上下文
  world: "MAIN",
}

declare global {
  interface Window {
    roxie?: {
      name: string,
      age: number,
      sayHello: () => void
    }
  }
}

window.roxie = {
  name: "Roxie",
  age: 30,
  sayHello: () => {
    console.log("Hello, I'm Roxie!")
  }
}

为自己添加的元素增加样式–样式隔离：

//此处为自己新增的leftSide.tsx页面
import type { PlasmoCSConfig } from "plasmo";
import cssText from "data-text:~style.css"

export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  exclude_matches: ["https://www.baidu.com/"],
  world: "MAIN"
}
//因为plasmo样式和Chrome浏览器样式有一个隔离，所以需要具名导出getStyle，样式才会生效
//这段代码是plasmo官方生成，可以直接复制到自己的页面中
export const getStyle = (): HTMLStyleElement => {
  const baseFontSize = 16
  let updatedCssText = cssText.replaceAll(":root", ":host(plasmo-csui)")
  const remRegex = /([\d.]+)rem/g
  updatedCssText = updatedCssText.replace(remRegex, (match, remValue) => {
    const pixelsValue = parseFloat(remValue) * baseFontSize
    return `${pixelsValue}px`
  })

  const styleElement = document.createElement("style")
  styleElement.textContent = updatedCssText
  return styleElement
}

export default function LeftSide() {
  return (
    <div className="plasmo-flex plasmo-flex-col plasmo-items-center plasmo-px-4 plasmo-py-2 plasmo-text-sm plasmo-rounded-lg plasmo-transition-all plasmo-border-none
    plasmo-shadow-lg hover:plasmo-shadow-md
    active:plasmo-scale-105 plasmo-bg-slate-50 hover:plasmo-bg-slate-100 plasmo-text-slate-800 hover:plasmo-text-slate-900">
      <div>leftSide</div>
    </div>
  )
}

将leftSide.tsx渲染在指定DOM节点上

//将leftSide挂载到指定的元素上
export const getInlineAnchor = (): HTMLDivElement => {
  return document.querySelector("#ca_main")
}

-----------------------------------------//可以动态渲染----------------------------------
import type { PlasmoGetInlineAnchor, PlasmoGetInlineAnchorList } from "plasmo"
// 单个锚点
export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
  await new Promise(resolve => setTimeout(resolve, 1000)) // 等待页面加载
  return document.querySelector(".target-element")
}
// 多个锚点（在多个位置渲染）
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  return document.querySelectorAll(".post-item")
}