如何包含 Chrome 扩展内容脚本的样式？答案

【问题标题】：How can I contain the styles of a Chrome Extension content script?如何包含 Chrome 扩展内容脚本的样式？
【发布时间】：2017-02-06 16:41:15
【问题描述】：

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

UI 组件come from react-mdl。使用它们需要我在我的项目顶部包含一个css file。

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

有没有办法限制react-mdl 使用的css 的范围，使其不会影响我正在注入的页面？

【问题讨论】：

所以这只发生在其他使用 react 的网页上？
不，我只注入到一个域中的页面，并且它的页面都没有使用 React（或任何框架——只是普通的 JS/jquery 和 css/html）
好的，你能分享一些css文件吗？也许只是使用您知道不会在其他任何地方使用的自定义类名
实际上，我看到了这个问题。您链接的 css 文件具有非常通用的标签，例如 body。您可能需要手动重命名这些
乱七八糟的工作，这个网页设计。谢谢@NoamHacker。我可以体验一下this a bit first

标签： css reactjs google-chrome-extension material-design-lite

【解决方案1】：

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

// 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>
       <div id='shadowReactRoot' />
       `
    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')
        )
})

那么，果然：

【讨论】：

【解决方案2】：

我认为您应该使用 Shadow DOM API。当您只需要将 UI 组件附加到网页时，这是一种很好的做法。

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

【讨论】：

谢谢。我将不得不对我的 webpack 配置进行一些调整以使 css 内联正常工作，但是当我将整个 material.css 粘贴到 shadow 根目录中的 style 标记中时，效果很好。

【解决方案3】：

this other SO post中提到，<link>标签也是支持的，所以可以简单的做如下：

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);

注意事项：

使用 chrome.extension.getURL 是获取扩展的本地资源 url 所必需的，参见例如in this answer。
链接的.css 资源必须在manifest.json 的web_accessible_resources 属性下声明（否则，您将获得this error）

【讨论】：