Content-script overlay for shadow dom

[Juicpt]

Checkout this example repo: https://github.com/Juicpt/extend-chrome
I want to use overlay in content_script.but i found that i can't get the css
how should i get the css?
Thanks for any help!

[jacksteamdev]

@Juicpt Shadow DOM is the right solution for content scripts. I like the way you're getting the CSS filenames from the manifest.

Vite seems to have a blind spot with Shadow DOM:

1. vite dev HMR puts CSS updates in document.head
2. vite build adds a single concatenated stylesheet to document.head in HTML builds
3. Importing CSS with the ?url query doesn't work in production (see this comment for Vite creator's thoughts)

We need a content script API that works for both development (multiple style tags) and production (single link tag). The CSS file URL is too low level since the number of CSS files changes. If the content script client handles the low level details, maybe a Set of all style roots is all we need.

import { styleRootSet } from '@crx/client'

// setup details...
const shadowDOM = container.attachShadow?.({mode: 'closed'})
styleRootSet.delete(document.head) // CSS no longer goes here
styleRootSet.add(shadowDOM) // CSS now goes here
// finish setup...

Benefits

1. Remove CSS from manifest.content_scripts
2. Styles are applied to document.head by default
3. Can support multiple Shadow DOM roots
4. CSS HMR works in Shadow DOM (it doesn't right now)

Concerns

1. If we add styles to document.head at document start and remove them later

• the user will see the changed styles flash on the screen
• need to know not to use document.head before load

2. Not all shadow roots are known at load time

• e.g., adding a button to a lazy-loaded search result
• need a dynamic way to add style roots

We could resolve these concerns with optional lifecycle hooks for content script entry files:

// content-scripts/main.jsx
import { styleRootSet } from '@crx/client'

// runs before style tags are added to dom
export function setup() {
  // setup details...
  const shadowDOM = container.attachShadow?.({mode: 'closed'})
  styleRootSet.delete(document.head) // CSS no longer goes here
  styleRootSet.add(shadowDOM) // CSS now goes here
  // finish setup...
}

// runs after style tags are loaded
export function mount() {
  // mount your app
  document.body.appendChild(container)
  ReactDOM.render(<Content/>, root);
}

@Juicpt @evanb2 What do you think?

Related to #238

[Juicpt]

You thought well, I have no other ideas

[jacksteamdev]

I'll update this discussion when this feature is implemented.

[dinfer]

any progress？

[demirelio]

any progress on this? @jacksteamdev

[farazshuja]

Here is the alternate approach I used to get css into shadow dom. Created a vite plugin to use custom updateStyle and removeStyle methods.

// https://github.com/farazshuja/chrome-extension-vite-vue-starter-template/blob/master/vite.config.ts#L63-L85
    {
      name: 'merge-css-shadow-dom',
      enforce: 'post',
      apply: 'serve',
      transform(src, id) {
        if (/\.(css).*$/.test(id)) {
          const fn =
            "import { updateStyle, removeStyle } from '/src/contentScripts/utils.ts';\n";
          let updatedSrc = fn + src;
          updatedSrc = updatedSrc.replace(
            '__vite__updateStyle(',
            'updateStyle(',
          );
          updatedSrc = updatedSrc.replace(
            '__vite__removeStyle(',
            'removeStyle(',
          );
          return {
            code: updatedSrc,
          };
        }
      },
    },

the utils file has same code as of vite/client, but its injecting the css into shodow-dom instead of head.
https://github.com/farazshuja/chrome-extension-vite-vue-starter-template/blob/master/src/contentScripts/utils.ts

[jacksteamdev]

Brilliant!

[cenkce]

Thanks