Chrome拡張機能開発 Content Script備忘録

const timer = setInterval(injectContent,1000);
setTimeout(() => clearInterval(timer), 10000);

function injectContent() {
  const anchor = document.querySelector("#myroot");
  if (!anchor) {
    return;
  }
  clearInterval(timer);
  // anchorが出現した時の処理を書く
}

async function getAnchor(selector:string): Promise<Element> {
  return new Promise( (resolve) => {
    let elm = document.querySelector(selector);
    if (elm) {
      return resolve(elm);
    }
    const observer = new MutationObserver(() => {
      elm = document.querySelector(selector);
      if (elm) {
        observer.disconnect();
        resolve(elm);
      }
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    })
  } )
}

const container = document.createElement("div");
container.id = "myroot";
const shadow = container.attachShadow({ mode: "open" });

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'

function main() {
  const container = document.createElement("div");
  container.id = "myroot";
  const shadowRoot = container.attachShadow({ mode: "open" });
  shadowRoot.innerHTML = `
  <style>
  @unocss-placeholder
  </style>
  `

  const timer = setInterval(injectContent,1000);
  setTimeout(() => clearInterval(timer), 10000);

  function injectContent() {
    const anchor = document.querySelector("#anchor");
    if (!anchor) {
      return;
    }
    clearInterval(timer);
    anchor.before(container);
    const root = createRoot(shadowRoot);
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    )
  }
}
main()

module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-prefix-selector': { prefix: '#myroot' },
    autoprefixer: {},
  },
};