介绍

我正在构建一个Chrome扩展程序，该扩展程序使用Content脚本呈现一个React组件。React组件是一个工具栏，其中包含子工具，供用户在浏览页面时使用。我将Material UI用作工具栏及其所有其他子组件，弹出窗口等的组件库和样式解决方案。

什么有效

使用div，“ Extension”作为mountNode，将根React组件注入页面即可。

content.js（Chrome内容脚本）

var app = $('<div id="Extension" style="position: fixed; display: block; bottom: 0px; left: 0px; width: 100vw; height: 48px; background: grey; z-index: 99999"></div>')
app.prependTo('body');
render(<App />, document.getElementById('Extension'))

app.js（主要React组件）

Material UI还可以生成新的样式对象，并将css样式应用于页面上的子组件。所以这一切都很好

（资源）

const styles = {
  root: {
    display: "block",
    color: "red",
  },
};

（生成）

.App-root-1 {
  color: red;
  display: block;
}

问题

由于我在Chrome中使用内容脚本，因此像Facebook这样的带有常规CSS选择器的网站会尝试覆盖中的样式Material UI。CSS属性也有可能从React工具栏泄漏到主页中。

中途解决方案

我当前的解决方案是使用react-shadow围绕React组件的样式范围，并将其与页面的其余部分隔离。

var app = $('<div id="Extension" style="position: fixed; display: block; bottom: 0px; left: …