Javascript 如何在chrome扩展内容脚本中定义CSS的范围

我正在开发一个chrome扩展，在页面上插入一个按钮。单击此按钮时，将启动twitter引导模式。然而，注入twitter引导的css正在影响页面本身，我只希望它们影响modal div。我怎样才能做到这一点

---

谢谢大家!

只有一种真正的方法可以做到这一点，而且所涉及的问题更少

看看这个答案：

或者这个：

这两种方法都应该很有效

我已经尝试过另外一种解决方案：

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

检查此处的支持：

---

总结：LESS-route似乎是目前最好的解决方案…

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

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

var dialog=Boundary.createBox（“yourDialogID”、“yourDialogClassName”）；
Boundary.loadBoxCSS（“yourDialogID”，“dialog.css中元素的样式”）；
边界附加框(
“#yourDialogID”，
“提交”
);
边界。查找（“提交”按钮）。单击（函数（）{
//函数返回一个常规jQuery DOM元素
//所以你可以用它做任何你想做的事。
//点击按钮后的一些js。
});

#yourDialogID中的元素将不受现有网页的影响

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

---

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