1

ここで本質的に同じ Q&A にもかかわらず、2 年後に何らかの洞察が得られたかどうかを確認するために、私はこれを尋ねています。

私は、ユーザーがアクセスするすべての Web サイトに独自の GUI を挿入する Chrome 拡張機能に取り組んできました。継承が原因で、GUI の外観に問題が生じます。ほとんどのページでは問題なく動作しますが、他のページでは不安定になります (壊れる場合もあります)。

この問題に対する非常に必要な CSS アプローチについて読みましたが、Google Chrome 29.0 ではサポートされていないようです。上記の Q&A の回答を実装するのは非常に面倒です。なぜなら、私の HTML は動的で広範であり、拡張可能であることを意図しているからです。私はモジュール性のためにコードを単純化しようとしていますが、非常に複雑にするつもりはありません。私のコンテンツ スクリプトは多くの通信 (バックグラウンド スクリプトとポップアップ スクリプト) を行うため、iframe が実用的かどうかはわかりません。(さらに、このコンテキストでは iframe でまったく成功していません。)

私が完全に見落としていた独創的な解決策を誰かが思いついたのではないでしょうか? この種の API はありますか?

4

1 に答える 1

1

私は最近、このような問題を解決するための CSS+JS ライブラリである Boundary を作成しました。Boundary は、既存の Web ページの 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 内の要素は、既存の Web ページの影響を受けません。

お役に立てれば。ご不明な点がございましたら、お知らせください。

https://github.com/liviavinci/Boundary

于 2014-10-17T18:15:58.730 に答える