如何在 chrome 扩展内容脚本中限定 CSS答案

【问题标题】：How to scope CSS in chrome extension content scripts如何在 chrome 扩展内容脚本中限定 CSS
【发布时间】：2014-03-24 20:44:51
【问题描述】：

我正在开发一个 chrome 扩展，可以将按钮注入页面。单击此按钮时，它会启动一个 twitter 引导模式。但是，使用 twitter bootstrap 注入的 css 会影响页面本身，我只希望它们影响模态 div。我怎样才能做到这一点？

谢谢！

【问题讨论】：

标签： javascript twitter-bootstrap google-chrome-extension

【解决方案1】：

只有一种真正的方法可以做到这一点，它涉及 LESS

看到这个答案：https://stackoverflow.com/a/14145510/1060487

或者这个：https://stackoverflow.com/a/15115171/1060487

这两种方法都应该可以正常工作。

我尝试了另一种解决方案：

http://css-tricks.com/saving-the-day-with-scoped-css/

这在 Chrome 中不起作用，但有一个 polyfill here，它似乎不太好用...

在此处查看支持：http://caniuse.com/style-scoped

总结：LESS 路线似乎是目前最好的解决方案...

【讨论】：

【解决方案2】：

我最近创建了 Boundary，一个 CSS+JS 库来解决这样的问题。 Boundary 创建的元素与现有网页的 CSS 完全分离。

以创建对话框为例。安装 Boundary 后，您可以在内容脚本中执行此操作

var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");

Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");

Boundary.appendToBox(
    "#yourDialogID",
    "<button id='submit_button'>submit</button>"
);

Boundary.find("#submit_button").click(function() {
  // find() function returns a regular jQuery DOM element
  // so you can do whatever you want with it.
  // some js after button is clicked.
});

#yourDialogID 中的元素不会受到现有网页的影响。

希望这会有所帮助。如果您有任何问题，请告诉我。

https://github.com/liviavinci/Boundary

【讨论】：

我尝试使用边界，因为我想从 chrome 扩展内容脚本中打开一个 twitter 引导模式。显示模态但不像我那样显示模态，可能你已经习惯了它（在当前网页上），但只是作为添加 iframe 的网页的一部分。知道我做错了什么吗？
@TorstenFeld 你能更具体一点吗？也许一些代码示例和屏幕截图？随时给我发电子邮件 liviavinci@gmail.com