34

オートコンプリート フィールドと独自のスタイルでダイアログをポップアップする Google Chrome 拡張機能を作成しましたが、CSS が完全に壊れているサイトがいくつかあり、見栄えがよくありません。

iFrame でスタイルを分離することは知っていますが、Google Chrome 拡張機能では、この方法で HTML と CSS を分離する方法はありません。別の方法は、すべてのものを独自の id とその id の相対スタイルを使用して個別の div にラップすることです。私はそうしていますが、「ハード」タグ スタイルのオーバーロードまたは「! CSS コードの重要な」ディレクティブ。

だから、私のスタイルを便利な方法で本当に分離する方法があるのか​​ 、それとも各サイトのスタイルの問題を修正するためにすべての小さなCSSプロパティをオーバーロードするのは私の悪いカルマなのか知りたいですか？

ちなみに、「document_end」ですべてのものをロードするようにマニフェストを設定しましたが、DOM の準備が整うたびにロードされるスタイルシートには適用されていません。

4

5 に答える 5

23

質問をした時点で、唯一のオプションは、iframe または非常に特異性の高いスタイルシートを使用し、スタイルに影響を与える可能性のあるすべてのプロパティを明示的に設定することでした。最後の方法は非常に面倒です。なぜなら、あなたが見落としているプロパティが常に存在するからです。したがって、スタイルシートを分離するために使用できる唯一の方法は、iframe を使用することでした。

この問題 (iframe を使用しないスタイルの分離) の解決策は、Shadow DOM ( Chrome 25 以降) です。HTML5 Rocksでチュートリアルを見つけることができます。Shadow DOM を使用してスタイルを分離する実際の Chrome 拡張機能については、Display #Anchors (ソース コードはこちら) を参照してください。

于 2013-11-27T11:29:05.563 に答える
7

どちらかを使用all

.some-selector {
    all: initial;
}

.some-selector * {
    all: unset;
}

または Shadow DOM を使用する

としょうかん

function Widget(nodeName, appendTo){
  this.outer = document.createElement(nodeName || 'DIV');
  this.outer.className = 'extension-widget-' + chrome.runtime.id;
  this.inner = this.outer.createShadowRoot();
  (appendTo || document.body).appendChild(this.outer);
}

Widget.prototype.show = function(){
  this.outer.style.display = 'block';
  return this;
};

Widget.prototype.hide = function(){
  this.outer.style.display = 'none';
  return this;
};

使用法

var myWidget = new Widget();
myWidget.inner.innerHTML = '<h1>myWidget</h1>';

myWidget.innerウィジェットのコンテンツには、 および外側の 経由でアクセスできますmyWidget.outer。

スタイル

/* 
 * Reset Widget Wrapper Element 
 */
.extension-widget-__MSG_@@extension_id__ {
  background: none;
  border: none;
  bottom: auto;
  box-shadow: none;
  color: black;
  cursor: auto;
  display: inline;
  float: none;
  font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: inherit;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  height: auto;
  left: auto;
  letter-spacing: 0;
  line-height: 100%;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  opacity: 1;
  padding: 0;
  position: static;
  right: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  top: auto;
  vertical-align: baseline;
  white-space: normal;
  width: auto;
  z-index: 2147483648;
}

/* 
 * Add your own styles here 
 * but always prefix them with:
 * 
 *   .extension-widget-__MSG_@@extension_id__ 
 *   
 */

.extension-widget-__MSG_@@extension_id__{
  position: fixed;
  top: 100px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 500px;
}

.extension-widget-__MSG_@@extension_id__::shadow h1 {
  display: block;
  margin: 0 auto;
  padding: 20px;
  background-color: yellow;
  border: 10px solid green;
  font-size: 20px;
  text-align: center;
}
于 2015-03-03T12:39:41.163 に答える
2

iframe を使用します。これは回避策ですが、正常に動作します。

Maxime はそれに関する記事を書いています。

于 2013-11-27T08:25:20.470 に答える