2

ユーザーがアクセスするすべてのページの上にバナーを挿入するブラウザー拡張機能を作成しています。バナーは粘着性であってはならず、既存のコンテンツをブロックしてはなりません。（私のクロム拡張機能）

現在、すべてのページに挿入される contentscript の次の javascript を使用してバナー コンテンツを DOM に追加することでこれを行っています。

$content = $('<div id="lb-banner'>blah blah</div>');
$('html:first').addClass('lb-banner-added').prepend($content);

サイトのスタイルによってバナーが影響を受けないように、本文の前にコンテンツを追加しています。次に、潜在的なサイト レイアウトに影響を与えずにページのメイン コンテンツを押し下げるために、次のスタイルを使用しています。

html.lb-banner-added {
   position: relative;
   margin-top: 32px;
}
#lb-banner {
   height: 32px;
   width: 100%;
   position: absolute;
   top: -32px;
   display: none;
   ... other styles...
}
.lb-banner-added #lb-banner { display: block; }

これにより、バナーが空のスペース (この場合は 32px) を埋めるように絶対に配置されている間、html 全体が押し下げられます。

すべてのページの上にバナーを追加する他の方法を試しました。ただし、この方法はこれまでのところほとんどのサイトと互換性があります (スティッキー ヘッダーを使用するサイトの多くでも)。

ただし、facebook、twitter、linkedin (機能しますが、一部のコンテンツをブロックしています)、gmail/gcalendar/gdoc (機能しますが、一部のコンテンツがウィンドウの外に移動する原因となった) で機能させることができないため、これは間違いなく最善の解決策ではありません。もっとたくさん。さらに、この方法ではコンテンツの高さを指定する必要があります。これは今のところ問題ありませんが、より動的な方法をお勧めします。

ノート：

上に示したスタイリングがなければ、バナーはすべてのページの上部に表示されます。ただし、これを行うと、google.com などの多くのサイトでレイアウトが崩れます。たとえば、Google では、バナーは黒いナビゲーション バーを覆うだけで、検索結果の直前に余分なスペースが表示されます。

問題の chrome 拡張機能は次のとおりですhttps://chrome.google.com/webstore/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima

4

1 に答える 1

3

UI を DOM に直接挿入する場合、何をしても問題ありません。不要な干渉から完全にサンドボックス化することはできません。たとえば、特定のページは、ページの読み込み後に非同期で要素に読み込まれる可能性があり、UI が邪魔にならないようにするためにできることはほとんどありません。また、UI 要素のすべての CSS スタイルを明示的に宣言しない限り、外部で定義されたスタイルによって常に上書きされる可能性があります。

ブラウザー拡張機能で使用される一般的な方法の 1 つは、UI をフレームに埋め込み、それを DOM の上部に配置することです。これはきれいな解決策ではありませんが、不要な干渉からスタイリングを分離します。

ページのコンテンツに <iframe> を挿入しても問題ありませんか?

于 2013-05-21T21:49:54.227 に答える