关于content样式隔离

[panghuangdehaozi]

您好 再content_scripts中页面的样式是和谷歌插件公用的,这样会导致某些页面会出现偏移情况,请问如何能做的样式隔离?

[Jervis2049]

你好。没明白你说的意思，可以提供一个简单的demo吗。

[panghuangdehaozi]

我在项目中使用了 tailwindcss 这样会导致有些网站页面出现错乱,我看别的插件时使用shadow DOM来做样式隔离的,但是目前我不知道怎么注入样式,现在的样式是全局生效的,所以会导致网页布局出现错乱;
https://gitee.com/yaoyaolei/plugin-demo.git 这是一个demo
如果有解决办法麻烦请告诉我一下
目前我取消使用tailwindcss 看起来不会影响页面

比如这个网站https://www.antdv.com/components/overview 我的demo就会影响它的布局

[Jervis2049]

初步看了一下，明白你意思了，我之后有空再看看怎么处理这个问题。

[leacoleaco]

我也遇到了这个问题...

[Jervis2049]

我在项目中使用了 tailwindcss 这样会导致有些网站页面出现错乱,我看别的插件时使用shadow DOM来做样式隔离的,但是目前我不知道怎么注入样式,现在的样式是全局生效的,所以会导致网页布局出现错乱; https://gitee.com/yaoyaolei/plugin-demo.git 这是一个demo 如果有解决办法麻烦请告诉我一下 目前我取消使用tailwindcss 看起来不会影响页面 比如这个网站https://www.antdv.com/components/overview 我的demo就会影响它的布局

在你这个例子中，可以尝试这样做。后续会想办法，在vite plugin层面做一些工作，以此简化这些写法。

// 删除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);
};

[leacoleaco]

@Jervis2049 这样写好像 vue 页面中的 style 里的样式就不生效了... 😮‍💨

[panghuangdehaozi]

@leacoleaco 你可以试试这个plasmo

[heng1025]

可以试试这种方案tailwindlabs/tailwindcss#9633

[leacoleaco]

@panghuangdehaozi plasmo 用过了, 但是感觉它用于 react 比较友好, 用在vue 感觉好鸡肋哦....写法好麻烦

[chen-af]

antd 的 css in js 可以解决呀 如果是content-scripts的话 <style lang="less" scoped></style> 也可以解决吧？

import { defineConfig, splitVendorChunkPlugin } from "vite";
import vue from "@vitejs/plugin-vue";
import crx from "vite-plugin-crx-mv3";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      crx({
        manifest: "./src/manifest.json",
      }),
      Components({
        resolvers: [
          AntDesignVueResolver({
            importStyle: false, // css in js
          }),
        ],
      }),
      splitVendorChunkPlugin(),
    ],
    build: {
      emptyOutDir: mode === "production",
      minify: "esbuild",
    },
  };
});