css 在浏览器扩展的内容脚本中使用顺风

ldioqlga 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(120)

我试图写一个浏览器扩展注入一些按钮和自定义组件到一个网站，因此我想使用Tailwind（和DaisyUI）的风格。
我找到了this discussion并根据解决方案配置了我的项目，我让Tailwind和DaisyUI为我的扩展的弹出窗口工作。

@tailwind base;
@tailwind components;
@tailwind utilities;

这是用import "../App.css";导入到我的Popup.tsx中的，没有问题。
但是当我尝试在content-script中进行相同的导入时，我没有得到任何错误，但是脚本不知何故失败了/根本就不执行了。如果我放入一个console.log而没有导入App.css，它会被打印出来。如果我导入App.css，它就不会再显示了。
这可能是我的webpack/postcss-config的错误，或者是其他什么阻止我在内容脚本中使用自定义CSS？我很困惑，因为它在弹出窗口中工作没有任何问题。
编辑：无论我尝试在content-script中加载什么CSS文件，这个问题似乎都会出现。

css

来源：https://stackoverflow.com/questions/71563364/use-tailwind-in-content-script-of-browser-extension

1条答案

按热度按时间

mjqavswn1#

我遇到了同样的问题，但希望我找到了解决方案。
在我的webpack配置中，我在plugins部分中指定，我希望将名为tailwind.css的文件复制到dist中。

我的文件结构

src/
 - ContentScript.tsx (imorting tailwind.css)
 - tailwind.css

-- output is generated below
dist/
 js/
   contentScript.js
   tailwind.css
 manifest.json

在webpack.config.js中

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  // Other config goes there
  plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: "src/tailwind.css",
                    to: "./",
                },
            ],
        }),
    ],
 }

在清单. json中

{
  // other config
  "content_script": [
  {
    // your config
    "css": ["js/tailwind.css"],
    "js": ["js/contentScript.js"]
  }
  ],
  "web_accessible_ressources": [
  {"resources": ["js/*"]}
  ]
}

赞(0）回复(0）举报 2023-01-27

我来回答

css 在浏览器扩展的内容脚本中使用顺风

1条答案

我的文件结构

在webpack.config.js中

在清单. json中

相关问题

热门标签

最新问答