关于 css：如何包含 Chrome 扩展内容脚本的样式？
How can I contain the styles of a Chrome Extension content script?
我正在开发一个将一些 UI 反应组件注入页面的 Chrome 扩展程序。
UI 组件来自
不幸的是，一旦将
有没有办法限制
相关讨论
- 所以这只发生在其他使用反应的网页上？
- 不，我只注入到一个域中的页面，并且它的页面都没有使用 React(或任何框架 - 只是 vanilla JS/jquery 和 css/html)
- 好的，你能分享一些css文件吗？也许只是使用您知道不会在其他任何地方使用的自定义类名
-
实际上，我看到了这个问题。您链接的 css 文件具有非常通用的标签，例如
body 。您可能需要手动重命名这些 -
啊，我害怕那个。据您所知，没有办法强制范围吗？我可以对
material.css 进行一点处理并摆脱页面级的东西，但如果我可以避免篡改它，我会喜欢它。 - 听起来如果你明白了，你应该没问题。让我知道它是否有效:)
- 凌乱的工作，这个网页设计。谢谢@NoamHacker。我可以先体验一下
-
@NoamHacker 证明下面@Deliaz 提到的
shadowDOM 效果很好。它将我需要的样式完全封装在我注入的 div 中。 - 谢谢，很高兴我学到了新东西！
将这个作为已接受的答案发布给后人值得称赞，但如果有人发现自己处于类似的困境中，以下是对我有用的代码片段：
// 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') ) }) |
那么，果然：
我认为你应该使用 Shadow DOM API。当您只需要将 UI 组件附加到网页时，这是一种很好的做法。
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
相关讨论
- 谢谢。我将不得不稍微调整一下我的 webpack 配置以使 css 内联正常工作，但是当我将整个
material.css 粘贴到shadow 根目录中的style 标记中时，效果很好。
正如在另一篇 SO 帖子中提到的，也支持
const injectedDiv = document.createElement('div'); const shadowRoot = injectedDiv.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = `\\ <link rel="stylesheet" type="text/css" href="${chrome.extension.getURL("bootstrap.min.css")}"></link>\\ <link rel="stylesheet" type="text/css" href="${chrome.extension.getURL("whatever.css")}"></link>\\ `; document.body.appendChild(injectedDiv); |
注释：