关于 css：如何包含 Chrome 扩展内容脚本的样式？

How can I contain the styles of a Chrome Extension content script?

我正在开发一个将一些 UI 反应组件注入页面的 Chrome 扩展程序。

UI 组件来自 react-mdl。使用它们需要我在项目顶部包含一个 css 文件。

不幸的是，一旦将 css 注入页面，整个页面的字体就会改变。

有没有办法限制 react-mdl 使用的 css 的范围，这样它就不会影响我要注入的页面？

相关讨论

所以这只发生在其他使用反应的网页上？
不，我只注入到一个域中的页面，并且它的页面都没有使用 React(或任何框架 – 只是 vanilla JS/jquery 和 css/html)
好的，你能分享一些css文件吗？也许只是使用您知道不会在其他任何地方使用的自定义类名
实际上，我看到了这个问题。您链接的 css 文件具有非常通用的标签，例如 body。您可能需要手动重命名这些
啊，我害怕那个。据您所知，没有办法强制范围吗？我可以对 material.css 进行一点处理并摆脱页面级的东西，但如果我可以避免篡改它，我会喜欢它。
听起来如果你明白了，你应该没问题。让我知道它是否有效:)
凌乱的工作，这个网页设计。谢谢@NoamHacker。我可以先体验一下
@NoamHacker 证明下面@Deliaz 提到的 shadowDOM 效果很好。它将我需要的样式完全封装在我注入的 div 中。
谢谢，很高兴我学到了新东西！

将这个作为已接受的答案发布给后人值得称赞，但如果有人发现自己处于类似的困境中，以下是对我有用的代码片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// my injected code
window.addEventListener(‘load’, () => {
const injectDiv = document.createElement(‘div’)
const shadowRoot = injectDiv.attachShadow({ mode: ‘open’ })

// note inline use of webpack raw-loader, so that the css
// file gets inserted as raw text, instead of attached to <head>
// as with the webpack style-loader

shadowRoot.innerHTML = // just using template string
`
<style>${require(‘raw-loader!app/styles/extension-material.css’)}</style>

`
document.body.appendChild(injectDiv)
ReactDOM.render(
<App />,
// note you have to start your query in the shadow DOM
// in order to find your root
shadowRoot.querySelector(‘#shadowReactRoot’)
)
})