🧩 Plasmo Developers•16mo ago

Getting Tailwind to work in content scripts

I'm following the instructions from https://docs.plasmo.com/quickstarts/with-tailwindcss, with the exception that I did not pnpm create plasmo --with-tailwindcss because my project was already started. However I did all the other stuff. I think I must be doing the getStyle export wrong? The style is not being injected. any idea what may be going wrong? This is my content script: contents/my-content-script.tsx

import type {
  PlasmoCSConfig,
  PlasmoCSUIJSXContainer,
  PlasmoCSUIProps,
  PlasmoRender
} from "plasmo"
import cssText from "data-text:~style.scss";
import type { PlasmoGetStyle } from "plasmo"

import type { FC } from "react"
import { createRoot } from "react-dom/client"
import CenterContent from "~components/center-content"

export const config: PlasmoCSConfig = {
  matches: ["https://the-host-for-mycontent-script.com/*"] // ommited the host for this example
}

export const getStyle: PlasmoGetStyle = () => {
  
  // This doesn't work. The style element doesn't show up?
  
  const style = document.createElement("style")
  style.textContent = cssText
  return style

  // This also doesn't work. 

  // const style = document.createElement("style")
  // style.id = 'this-doesnt-show-up-on-the-page-anywhere'
  // style.textContent = `
  //   .wtf {
  //     color: red !important;
  //   }
  // `
  // return style
}

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      // 
      const xpath = `//h1[contains(text(),"this part works fine")]`;
      const targetElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

      if (targetElement) {
        clearInterval(checkInterval);
        const rootContainerParent = targetElement.parentNode?.parentNode?.parentNode as HTMLElement;

        const rootContainer = document.createElement('div');
        rootContainer.id = 'my-root';
        rootContainer.classList.add('w-full', 'h-full', 'flex', 'flex-col');

        rootContainerParent.replaceChildren(rootContainer)
        resolve(rootContainer)
      }
    }, 137)
  })

const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
  return (
      <>
        <h1 className="text-bold text-2xl wtf">
            ------- This H1 shows up but the class styling doesn't work ------
        </h1>
      </>
  )
}

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  createRootContainer
}) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<PlasmoOverlay />)
}

export default PlasmoOverlay

import type {
  PlasmoCSConfig,
  PlasmoCSUIJSXContainer,
  PlasmoCSUIProps,
  PlasmoRender
} from "plasmo"
import cssText from "data-text:~style.scss";
import type { PlasmoGetStyle } from "plasmo"

import type { FC } from "react"
import { createRoot } from "react-dom/client"
import CenterContent from "~components/center-content"

export const config: PlasmoCSConfig = {
  matches: ["https://the-host-for-mycontent-script.com/*"] // ommited the host for this example
}

export const getStyle: PlasmoGetStyle = () => {
  
  // This doesn't work. The style element doesn't show up?
  
  const style = document.createElement("style")
  style.textContent = cssText
  return style

  // This also doesn't work. 

  // const style = document.createElement("style")
  // style.id = 'this-doesnt-show-up-on-the-page-anywhere'
  // style.textContent = `
  //   .wtf {
  //     color: red !important;
  //   }
  // `
  // return style
}

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      // 
      const xpath = `//h1[contains(text(),"this part works fine")]`;
      const targetElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

      if (targetElement) {
        clearInterval(checkInterval);
        const rootContainerParent = targetElement.parentNode?.parentNode?.parentNode as HTMLElement;

        const rootContainer = document.createElement('div');
        rootContainer.id = 'my-root';
        rootContainer.classList.add('w-full', 'h-full', 'flex', 'flex-col');

        rootContainerParent.replaceChildren(rootContainer)
        resolve(rootContainer)
      }
    }, 137)
  })

const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
  return (
      <>
        <h1 className="text-bold text-2xl wtf">
            ------- This H1 shows up but the class styling doesn't work ------
        </h1>
      </>
  )
}

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  createRootContainer
}) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<PlasmoOverlay />)
}

export default PlasmoOverlay

2 Replies

k_nearest_neighborOP•16mo ago

here's a screenshot of that code if it is easier to read with syntax highlighting

illmagination•16mo ago

Have you whitelisted your files in your tailwind.config? module.exports ={ content:['./src/*/.{ts,tsx,js,jsx}'] } ^ google that. In phone and it's messing up the correct syntax

Gaming

Programming

Getting Tailwind to work in content scripts