Question

我正在使用Chrome扩展程序，该扩展程序会将一些UI反应组件注入页面。

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

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

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

Answer 1

我认为你应该使用Shadow DOM API。对于那些只需要将UI组件附加到网页的情况，这是一种很好的做法。

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

Answer 2

为后人发布此内容作为接受的答案值得赞扬，但如果有人发现自己处于类似的困境，这里有一段代码片段对我有用：

// 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 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，例如in this answer。
链接的.css资源必须在web_accessible_resources的{{1}}属性下声明（否则，您将获得this error）

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

3 个答案: