google-chrome - Chrome拡張機能を使用しているときにtwitterブートストラップcssが衝突する

Question

書いているChrome拡張機能にブートストラップを使用しています。コンテンツスクリプトとしてインポートすると、cssは私が表示している多くのサイトと衝突しているように見えます（Googleの検索結果ページでも）。

コンテンツスクリプトを使用して注入するdom要素のみにこれをスコープするためにできることがあるかどうか疑問に思っていますか？

Answer 1

解決策は、を使用すること<style scoped>です。

基本的に、スタイルを DOM ノードとその子に適用できますが、親ノードには適用できません。それを使用する方法を説明するCSS-Tricksに関する素晴らしい記事があります。

問題は、Chrome でも十分にサポートされていないため、jQuery ポリフィルを使用する必要があることです。これは基本的に、期待される機能をシミュレートする jQuery プラグインです<style scoped>。

これは、Bootstrap を使用してまさにそれを行っている作業中のJSFiddleです。

これを拡張機能に実装する方法の例を次に示します。

content_script.js :

$.scoped(); // Initialize the plugin
...
bootstrapped = document.createElement("div");
bootstrapped.innerHTML = "<style scoped>";
bootstrapped.innerHTML += "@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');";
bootstrapped.innerHTML += "</style>";
document.body.appendChild(bootstrapped);    
...
document.body.appendChild(myDOM); // Will not possess Bootstrap styles
bootstrapped.appendChild(myDOM); // Will possess Bootstrap styles

とりあえず、ページに jQuery と Scoped Plugin を必ず含めてください。

"content_scripts": [ {
    "js": [ "jquery.min.js", "jquery.scoped.min.js", "content_script.js" ],
    "matches": [ "http://*" ]
}]