如何在chrome擴展內容腳本中定位CSS

Question

我正在開發一個chrome擴展，它在頁面上注入一個按鈕。 單擊此按鈕時，將啟動twitter bootstrap模式。 但是，使用twitter bootstrap注入的css會影響頁面本身，我只希望它們影響模態div。 我怎樣才能做到這一點？

謝謝！

Answer 1

只有一種真正的方法可以做到這一點而且它涉及的很少

請參閱此答案： https ： //stackoverflow.com/a/14145510/1060487

或者這個： https ： //stackoverflow.com/a/15115171/1060487

這兩種方法都應該可行。

我已經嘗試了另外一個解決方案：

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

哪個在Chrome中不起作用，但這里有一個polyfill ，這似乎並沒有那么好......

查看支持點： http ： //caniuse.com/style-scoped

總結 ：LESS路線似乎是目前最好的解決方案......

Answer 2

我最近創建了Boundary，一個CSS + JS庫來解決這樣的問題。 邊界創建的元素與現有網頁的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