🧩 Plasmo Developers•3mo ago

Can I use native web components with CSUI?

I tried using Content Scripts UI (CSUI) with a native web component instead of a react component (see below), but I got a bunch of React errors in the browser console referring to a React component. Is there a way to make Plasmo work with native web components or something like Lit? Thanks.

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://www.plasmo.com/*"],
  world: "MAIN"
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(`[href="/#pricing"]`)

// Use this to optimize unmount lookups
export const getShadowHostId = () => "plasmo-inline-example-unique-id"

class PlasmoInline extends HTMLElement {
  constructor() {
    super();

    const container = document.createElement('div');
    container.style.borderRadius = '4px';
    container.style.padding = '4px';
    container.style.background = 'pink';
    container.textContent = 'CSUI INLINE';

    // Append directly to the element without shadow DOM
    this.appendChild(container);
  }
}

// Define the custom element
customElements.define('plasmo-inline', PlasmoInline);

export default PlasmoInline

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://www.plasmo.com/*"],
  world: "MAIN"
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(`[href="/#pricing"]`)

// Use this to optimize unmount lookups
export const getShadowHostId = () => "plasmo-inline-example-unique-id"

class PlasmoInline extends HTMLElement {
  constructor() {
    super();

    const container = document.createElement('div');
    container.style.borderRadius = '4px';
    container.style.padding = '4px';
    container.style.background = 'pink';
    container.textContent = 'CSUI INLINE';

    // Append directly to the element without shadow DOM
    this.appendChild(container);
  }
}

// Define the custom element
customElements.define('plasmo-inline', PlasmoInline);

export default PlasmoInline

6 Replies

Arcane•3mo ago

@tatsumaru has reached level 2. GG!

Sam•3mo ago

You might need to dig into the custom DOM mounting, custom root container, or custom renderer functionality. https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-dom-mounting https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-root-container https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer

Plasmo Docs

Life Cycle of Plasmo CSUI – Plasmo

Plasmo's CSUI orchestrates a lifecycle dedicated to mounting and unmounting your React, Vue, or Svelte components in a content script.

Sam•3mo ago

I haven't tried using a web component, but I have a feeling these are the escape hatches you would use. I think the docs have examples with Svelte or Vue so that might be something helpful to look into.

Sam•3mo ago

Yeah ther are both svelte and vue examples. https://github.com/PlasmoHQ/examples/tree/main/with-svelte https://github.com/PlasmoHQ/examples/blob/4923b34eb8c89e4cb021bf161bea88dd5aa2d4e3/with-svelte/contents/plasmo-inline.svelte#L15 and they both use custom DOM mounting with mountShadowHost

GitHub

examples/with-svelte at main · PlasmoHQ/examples

🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples

GitHub

examples/with-svelte/contents/plasmo-inline.svelte at 4923b34eb8c89...

🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples

tatsumaruOP•3mo ago

Interesting, thanks!

Sam•3mo ago

No problem and I hope it works out.

Gaming

Programming

Can I use native web components with CSUI?