Shadow DOM powered Content Scripts UI

[Diveafall]

Shadow DOM powered Content Scripts UI

[Diveafall]

@cezaraugusto Would be a great addition to the documentation!

Also, the sample looks great and pretty straightforward. Thank you for making it!

Should be more than enough for my use case. Our extension uses MUI as the UI library, but adding it shouldn't be an issue. Below is the code for people who'd be interested:

import createCache from "@emotion/cache"
import { CacheProvider } from "@emotion/react"
import {
  createTheme,
  Stack,
  ThemeProvider,
  Typography
} from "@mui/material"

const styleElement = document.createElement("style")

const styleCache = createCache({
  key: "chatbot-cache",
  prepend: true,
  container: styleElement
})

export const getStyle = () => styleElement

const theme = createTheme({
  typography: {
    button: {
      textTransform: "none"
    }
  }
})

const Chatbot = () => {
  return (
    <CacheProvider value={styleCache}>
      <ThemeProvider theme={theme}>
        <Stack>
          <Typography>This should work!</Typography>
        </Stack>
      </ThemeProvider>
    </CacheProvider>
  )
}

export default Chatbot

Again, thank you for your help!

[cezaraugusto]

hi @Diveafall! thanks a lot!

I don't have a short-term plan to create an abstraction for that, but seems something worth adding to the documentation for future reference.

I created a sample running Tailwind.css in a content_script via Shadow DOM, let me know if it fits your use-case. Link https://github.com/cezaraugusto/content-shadow-dom-tailwind:

npx extension@latest dev https://github.com/cezaraugusto/content-shadow-dom-tailwind

Here's the code I used.

import ReactDOM from "react-dom/client";
import ContentApp from "./ContentApp";
import("./base.css");
import("./content.css");

setTimeout(initial, 1000);

const TAILWIND_URL =
  "https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css";

const appendTailwindStyleData = (shadowRoot: ShadowRoot) => {
  // Load and inject the local Tailwind CSS file into the shadow DOM
  const styleSheet = document.createElement("style");

  // Change this path to your actual Tailwind CSS file's location
  fetch(TAILWIND_URL)
    .then((response) => response.text())
    .then((css) => {
      styleSheet.textContent = css;
      shadowRoot.appendChild(styleSheet);
    });
  }

  const appendTailwindStyleLink = (shadowRoot: ShadowRoot) => {
    // Import Tailwind CSS and inject it into the shadow DOM
    const styleSheet = document.createElement("link");
    styleSheet.rel = "stylesheet";
    styleSheet.href = TAILWIND_URL;
    shadowRoot.appendChild(styleSheet);
  }


function initial() {
  // Create a new div element to host the shadow root.
  // Styles for this div is in `content/content.css`
  const hostDiv = document.createElement("div");
  hostDiv.id = "extension-host";
  document.body.appendChild(hostDiv);

  // Attach the shadow DOM to the hostDiv and set the mode to
  // 'open' for accessibility from JavaScript.
  // Ref https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
  const shadowRoot = hostDiv.attachShadow({ mode: "open" });

  // Create a new div element that will be the root container for the React app
  const rootDiv = document.createElement("div");
  rootDiv.id = "extension-root";
  shadowRoot.appendChild(rootDiv);

  // You can use either `appendTailwindStyleData` or `appendTailwindStyleLink`
  // to inject Tailwind CSS into the shadow DOM.

  // Option 1: Inject Tailwind CSS using a <style> tag
  // appendTailwindStyleLink(shadowRoot);

  // Option 2: Inject Tailwind CSS using a <link> tag
  appendTailwindStyleData(shadowRoot);

  // Use `createRoot` to create a root, then render the <ContentApp /> component
  const root = ReactDOM.createRoot(rootDiv);
  root.render(<ContentApp />);
}

[cezaraugusto]

Here's a screenshot of the above