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

Question

我正在开发一个 Chrome 扩展，它将一些 UI React 组件注入到页面中。

UI 组件来自

react-mdl

。使用它们需要我在项目顶部包含一个 css 文件。

不幸的是，一旦

css

被注入到页面中，整个页面的字体就改变了。

有没有办法限制

css

使用的

react-mdl

的范围，使其不会影响我要注入的页面？

Answer 1

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

// 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')
        )
})

然后，果然：

Answer 2

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

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

Answer 3

正如另一篇SO帖子中提到的，还支持

<link>

标签，因此可以简单地执行以下操作：

const injectedDiv = document.createElement('div');
const shadowRoot = injectedDiv.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `\
   <link rel="stylesheet" type="text/css" href="${chrome.runtime.getURL("bootstrap.min.css")}"></link>\
   <link rel="stylesheet" type="text/css" href="${chrome.runtime.getURL("whatever.css")}"></link>\
`;
document.body.appendChild(injectedDiv);

备注：

获取扩展程序的本地资源 url 需要使用
```
chrome.runtime.getURL
```
，请参阅例如在这个答案中。
- 链接的答案使用
```
chrome.extenstion.getURL
```
  ，自 Chrome 58 起已弃用，并且在清单 V3 中不起作用（请参阅此文档）。
链接的
```
.css
```
资源必须在
```
web_accessible_resources
```
中的
```
manifest.json
```
属性下声明（否则，您将收到此错误）

Answer 4

有比使用链接更安全的方式导入 CSS。这就是我要做的。

  const response = await fetch(chrome.runtime.getURL('your/path.css'))
  const cssText = await response.text();
  document.createElement('style').textContent = cssText;

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

问题描述投票：0回答：4

4个回答

最新问题

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

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4