RFC | Optionally shadowing DOM in Content Script UI

How do you envision this feature/change to look/work like?

Shadowing DOM is good for isolating app components. but still there needs to be inject directly in some use cases.

What is the purpose of this change/feature? Why?

Provide options for users who want their plugins work seamlessly with pre-exsiting site or something.

(OPTIONAL) Example implementations

provide options for content script:

export const config: PlasmoContentScript = {
  matches: ['https://github.com/*'],
  css: ['../assets/style.css'],
  inject_directly: false
}

template modification for cli/plasmo/templates/static/content-script-ui-mount.tsx:

window.addEventListener("load", () => {
  const useShadowRoot = Mount.config.inject_directly ?? true
  const mountPoint = useShadowRoot
    ? document.createElement("div")
    : Mount.getMountPoint() // inject app into target element directly
  if (useShadowRoot) {
    mountPoint.style.cssText = `
      z-index: 1;
      position: absolute;
    `
    const shadowHost = document.createElement("div")

    const shadowRoot = shadowHost.attachShadow({ mode: "open" })
    document.body.insertAdjacentElement("beforebegin", shadowHost)

    shadowRoot.appendChild(mountPoint)
  }
  const root = createRoot(mountPoint)

  root.render(<MountContainer />)
})

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

@louisgv That seems to work perfectly! I do have a question though, does getRootContainer support both sync and async methods? If not, I think it should. If it does then perfect👌

Thanks for implementing that so quickly 🔥

It supports both async and sync 😃

[louisgv]

Thank you for the example implementation 😄

I thought about using the config itself to tweak the mounting component. 2 issues I had in mind:

1. We would need to clean them up (so that when we construct the final manifest, we don’t include those non-manifest properties).
2. The casing - I prefer camelCase instead of snake_case for TypeScript in general.

I think it might be better to separate mountPoint from mountRoot. The “mountPoint” concept is Plasmo’s abstraction over how we make the component hover on top of some element on the page. On the other hand, the root component is supposed to be the parent of the mountPoint.

I think we should make another function called getMountRoot -> this would accomplish both the config override and prevent coupling these two concepts.