小さなパネルが既存の Web サイトの上に表示される Chrome 拡張機能を作成しています。特定の Web サイトにアクセスすると、パネルの CSS が Web サイトの CSS によって上書きされていることに気付きました。現在、Eric Meyer の CSS Resetを使用していますが、効果がないようです。他にできることはありますか？
2795 次
4 に答える
8
これは、実際にiframeをインスタンス化しないiframeの気の利いた「ハック」です。
- DOM に iframe を追加します。これは do dad のコンテナになります
- iframe に入り、本文の innerHTML に HTML コードを追加します。
次のようになります。
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2
iframe.contentDocument.body.innerHTML = '<a href="yomama.com">Normal link!!</a>';
于 2012-04-11T05:15:58.013 に答える
1
私が書いたばかりの拡張機能でも、同様の問題が発生しました。私はそれらのほとんどを消滅させましたが、すべてではありません。理由はわかっていると思いますが、例外を修正することはできませんでした（これは現在のところ学校の課題です）。
私が見つけたものは次のとおりです。スタイルシートが拡張機能マニフェストまたはバックグラウンドページから挿入されると、ユーザースタイルシートとして扱われ、デフォルトのブラウザースタイルシートよりもカスケード優先度が与えられます。ルールにディレクティブを追加!importantしても、少なくとも私の経験では役に立ちません。ユーザースタイルシート（拡張機能によって追加されるか、手動で追加される）には!importantディレクティブを含めることができますが、何らかの理由でChromeによって尊重されません。.なしでChromeDevToolsにどのように表示されるかを確認してください!important。属性を追加idしても、それ以外の場合は優先度が等しい場合にのみ特異性が優先されるため、どちらも役に立ちません。
私にとって何がうまくいくか：
var ninjaCSS = document.createElement("link");
ninjaCSS.setAttribute("rel", "stylesheet");
ninjaCSS.setAttribute("type", "text/css");
ninjaCSS.setAttribute("href", chrome.extension.getURL('ninja.css'));
document.getElementById("head").appendChild(ninjaCSS);
このコードは、マニフェストにコンテンツスクリプトとしてリストされているJavaScriptファイルに含まれており、ドキュメントの読み込み時に実行する必要があります。CSSファイルはマニフェストにリストされていませんが、拡張フォルダーに含まれています。これで、スタイルシートは他の作成者のスタイルシートと同等の立場になりました。
もちろん、それはほんの始まりに過ぎません。これで、パネル内のすべての要素に属性を与えることができidます（おそらくすでに持っています）。スタイルリセットを使用するかどうかはあなた次第です。ただし、実際のスタイルシートが操作しようとする可能性のあるすべてのルールをスタイルで指定していることを確認する必要があります。ルールをデフォルトから変更する予定がない場合でも、そのデフォルト値を指定する必要があります。デフォルト値が「none」の場合でも、
!important最後に、ディレクティブは慎重に使用するのが最適であるというすべての警告を勇敢に無視する必要があります。ここではまったく逆のことが当てはまります。すべてのスタイルルールに追加!importantすると、パネルのカスケードに関する限り、まったく使用しなかったかのようになります。一方、あなたはあなたのパネルのボスになります。!important私を信じてください、誰かが、例えば、彼らのbutton:hover background-image規則についての指令に取り組むつもりです。巧妙に作成されたボタンをリードして、1985年のボンジョヴィコンサートのコンサート画像に不可解に変形します。ただし、マウスがホバリングしているときだけなので、心配はいりません。
于 2012-05-06T02:01:17.373 に答える
1
Chrome 拡張機能自体に詳しくありません。ただし、「id」内でパネルをスコープしてみることができます。
<div id='my-panel'>
PANEL GOES HERE
</div>
そして、CSS では、#my-panelすべての CSS の最初のセレクターとして使用します。リセット css を取得し、#my-panelそこで定義されている各要素にも識別子を追加します。面倒かもしれません...しかし、すべての要素を確実にリセットし、ウェブサイトで定義されているものよりも高い優先度でそれらがリセットされることを事実上保証します.
于 2012-04-10T23:46:39.643 に答える
0
appendChildソリューションは私にとってはうまくいきます（Devin G RhodeとjCyCleの回答）。しかし、これらのソリューションは属性を追加するだけであることに気付きましたxmlns="http://www.w3.org/1999/xhtml"。したがって、この xmlns 属性をリンクタグに追加するだけでコードをテストし (JS を使用せずに直接)、それも機能しますが、理由はわかりません。
失敗:
<link rel="stylesheet" type="text/css" href="filesystem:chrome-extension://................/temporary/Content/Styles/style.css" />
働く：
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="filesystem:chrome-extension://.............../temporary/Content/Styles/style.css" />
于 2012-05-24T03:43:26.853 に答える