Movatterモバイル変換


[0]ホーム

URL:


Framework
Content Scripts UI

Content Scripts UI

Plasmo has first-class support for mounting React, Svelte3, or Vue3 components into the current webpage. This feature is called content scripts UI (CSUI).

An extension can have as many CSUI as needed, with each CSUI targeting a group of webpages or a specific webpage byexporting the config object. To start injecting UI using React:

  1. Create acontent.tsx
  2. Export a default React component
  3. Profit 🎉
content.tsx
constCustomButton= ()=> {return <button>Custom button</button>}exportdefault CustomButton
👀

NOTE: To have multiple content scripts, create acontents/ directory andhave your CSUI entries there.

Seewith-content-scripts-ui (opens in a new tab) for a full example.

Config

Content scripts UI are a subset of content scripts. Thus, you canexport a config object just as you would a regular Plasmo content script.

How does Plasmo CSUI work?

TL;DR: Plasmo creates aShadow DOM (opens in a new tab) and mounts your exported component onto it. This isolation technique prevents the web page's style from affecting your component's styling and vice-versa.

For more details, please see theLife Cycle of Plasmo CSUI.

Content ScriptsLife Cycle

[8]ページ先頭

©2009-2025 Movatter.jp