关于content样式隔离 about vite-plugin-crx-mv3 HOT 10 OPEN

// 删除src/content-scripts/App.tsx的 import "../style.css";
// src/content-scripts/content.ts 调整为以下：

import { createApp } from "vue";
import App from "./App";
import style from "../style.css?inline";
import contentClass from "./content.module.css?inline";

function loadStyle(
  styleContent: string,
  rootElement = document.querySelector("head")
) {
  const style = document.createElement("style");
  style.innerText = styleContent;
  rootElement?.appendChild(style);
}

const createShadowElement = (elementId: string): Element => {
  let rootElement = document.getElementById(elementId);
  if (rootElement) {
    const shadowMountNode = rootElement.shadowRoot?.querySelector(
      `#${elementId}Children`
    ) as Element;
    return shadowMountNode;
  }

  rootElement = document.createElement("div");
  rootElement.setAttribute("id", elementId);
  document.body.appendChild(rootElement);
  const shadowRoot: any = rootElement.attachShadow({ mode: "open" });

  loadStyle(style, shadowRoot);
  loadStyle(contentClass, shadowRoot);

  shadowRoot.defaultView = shadowRoot.ownerDocument.defaultView;

  shadowRoot.createElement = function (elementName: string) {
    const node = document.createElement(elementName);
    Object.defineProperty(node, "ownerDocument", { value: shadowRoot });
    return node;
  };
  const shadowMountNode = shadowRoot.createElement("div");
  shadowMountNode.setAttribute("id", `${elementId}Children`);

  shadowRoot.appendChild(shadowMountNode);

  return shadowMountNode;
};

window.onload =  () => {
  const rootElement = createShadowElement("crx-app");
  const app = createApp(App);
  app.mount(rootElement);
};