React Chrome 扩展语义-ui-css 未通过

Question

当尝试在基于 React 的 Chrome 扩展中使用语义 UI 时（从 this repo 提供的样板文件开始），语义 UI CSS 通过 index.js 导入并在最后的 build 中结束，但是当您使用任何语义 UI 组件时，它的 none 似乎实际上适用. CSS 似乎出现在最后的 build 中，但由于某种原因从未被拾取。

重要的是要注意，该扩展将 div 注入到它正在使用的网站上，并使用 div 作为 React 的根 div 将其组件呈现到.用于 chrome 扩展的典型弹出窗口当前未用于此扩展（因此不使用 HTML 文件来尝试使用语义的 CDN 版本）。

更奇怪的是，如果您将 node_modules/semantic-ui-css/semantic.css 中的所有 CSS 全部复制粘贴到 public/css/root.css 中，样式就会被拉出来并实际起作用，但是这不是长久之计。

到目前为止，我已经尝试将 semantic-ui-css 导入扩展的不同部分，但无济于事。由于 webpack 配置（与 the boilerplate 完全相同），它完全有可能无法正常工作，但我不完全确定要查找什么。

如有任何帮助，我们将不胜感激。

Answer 1

我们在使用描述的样板代码在 React 中创建 chrome 扩展时遇到了完全相同的问题。

您需要做的是专门将 'app.css' 和 'content.css' 添加到清单中。这些文件的实际路径是 post-build 位置，而不是预构建位置，因此对于 content.css 它将是

"/static/css/content.css"

如果您的 webpack 不同，请检查构建文件夹的位置。您还需要将这些文件也添加到“web_accessible_resources”部分。

您的构建文件应包含此文件以使其正常运行

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": [
        "/css/root.css",
        "/static/css/content.css",
        "/static/css/app.css"
      ],
      "js": ["/static/js/content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["/static/css/content.css", "/static/media/*"],
      "matches": ["<all_urls>"]
    }
  ]

Answer 2

如果您也被 fontawesome/semantic 图标卡住了。您需要将一些 CSS 添加到 css 文件的底部（我使用 app.css）

@font-face {
  font-family: "Icons";
  src: url("chrome-extension://__MSG_@@extension_id__/static/media/icons.eot");
  src: url("chrome-extension://__MSG_@@extension_id__/static/media/icons.eot?#iefix")
      format("embedded-opentype"),
    url("chrome-extension://__MSG_@@extension_id__/static/media/icons.woff2")
      format("woff2"),
    url("chrome-extension://__MSG_@@extension_id__/static/media/icons.woff")
      format("woff"),
    url("chrome-extension://__MSG_@@extension_id__/static/media/icons.ttf")
      format("truetype"),
    url("chrome-extension://__MSG_@@extension_id__/static/media/icons.svg#icons")
      format("svg");
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

这告诉它在 chrome 扩展名而不是您所在页面的 url 中找到图标的 fontawesome 文件。

React Chrome 扩展语义-ui-css 未通过

React Chrome Extension semantic-ui-css not pulling through

javascript

reactjs

webpack

google-chrome-extension

semantic-ui