Basic shadow-dom support

[cezaraugusto]

During development, Extension.js inject styles in the tag via <style> tag. This works great unless you want to scope the styles to avoid leaking CSS to the webpage. The common workaround is to inject the extension within a shadow DOM component.

This PR adds support to window.__EXTENSION_SHADOW_ROOT__. After defining the shadow root within the DOM, set it as a reference and the styles will be injected in there instead of the regular approach.

import ReactDOM from 'react-dom/client'
import ContentApp from './ContentApp'
import './styles.css'

setTimeout(initial, 1000)

function initial() {
  // Create a new div element and append it to the document's body
  const rootDiv = document.createElement('div')
  rootDiv.id = 'extension-root'
  document.body.appendChild(rootDiv)

  // Injecting content_scripts inside a shadow dom
  // prevents conflicts with the host page's styles.
  // This way, styles from the extension won't leak into the host page.
  const shadowRoot = rootDiv.attachShadow({mode: 'open'})

  if (process.env.EXTENSION_MODE === 'development') {
    // to use the shadow root as the root element
    // to inject styles into.
    window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
  }

  const root = ReactDOM.createRoot(shadowRoot)
  root.render(
    <div className="content_script">
      <ContentApp />
    </div>
  )
}

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/extension-js/extension.js/extension@226

npm i https://pkg.pr.new/extension-js/extension.js/extension-create@226

npm i https://pkg.pr.new/extension-js/extension.js/extension-develop@226

commit: 851a519

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅