4

私は非常に単純な Google Chrome 拡張機能を書いていますが、非常に多くの問題に直面しており、このような惨めな規模のプロジェクトには少し圧倒されます。

拡張機能は非常に単純なものです。任意のページ (たとえば、google.com) に到着すると、ページのコンテンツは非表示になり、ユーザーは質問に直面し、正しく答える必要があります... または他のページにリダイレクトされます正解のページです。つまり、質問に正しく答えないと、ユーザーはインターネット上のページにアクセスできません。

ページのコンテンツを非表示にするために、次のアプローチを使用して単純なオーバーレイを使用することにしました。

アプローチ #1

現在のドキュメントの本文に、幅/高さが 100% の単純な不透明を追加しようとしましたdiv。それはうまくいきましたが：position: fixed;z-index: 2147483647;

  • ページの CSS が my 内の要素に干渉し続けましたdiv。
  • その上に Flash コンテンツが表示されることがありました (少なくとも Windows XP では)。embedページ全体で s を追跡し、 wmode「透明」に設定しても問題は解決しませんでした。-10000px にオフセットするか、設定を display:none;単純に緩和しましたが、問題は解決しませんでした。この質問も参照してください。

アプローチ #2

上記のアプローチとiframeまったく同じように動作するように、作成されてページに挿入された でGUI をサンドボックス化してみました。div最初のアプローチの問題を完全に解決しますが、次のことを行います。

  • iframeクロスオリジン ポリシーのため、コンテンツにアクセスする方法がないようです。そして、そのアクセス – ユーザーが回答を入力している入力フィールドにハンドラーを割り当てる必要があります。質問が回答されたら、回答入力フィールドからフォーカスを盗んでいる人を覚えておく必要があります。 .
  • Message Passingの使用は私にはうまくいきませんでした。また、メッセージングによって全体が非常に複雑になり、アプリケーションを単純な Web ページとして (つまり、拡張機能としてではなく) 使用できなくなるため、それを機能させるべきかどうかさえわかりません。なぜ気にするのですか？

だから...私のアプローチのどこが間違っているのですか？私が気付いていない 3 番目または 4 番目のものはありますか?

感謝しますが、答えとしてコードは必要ありません。正しい方向へのヒントやプッシュも同様に良いでしょう.

PS ある時点で、共有するコードがあるかどうかを尋ねる人がいると思います。ありますが、たくさんあります。具体的にどの部分を見たいですか？

4

2 に答える 2

5

アプローチ #2

懸念事項 1

クロスオリジン ポリシーのため、iframe のコンテンツにアクセスする方法はないようです。そして、そのアクセス – ユーザーが回答を入力している入力フィールドにハンドラーを割り当てる必要があります。質問が回答されたら、回答入力フィールドからフォーカスを盗んでいる人を覚えておく必要があります。

はい、Web ページのすべてのコード、CSP などではなく、iframe のコンテンツにアクセスします。

iframe を挿入するコンテンツ スクリプト。

これが最善のアプローチであることをお勧めします。ここに示すように、動的に生成された iframe にスクリプトを挿入し、コンテンツを取得できます。

サンプル実装

マニフェスト.json

{
    "name": "Iframe",
    "description": "",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "myscript.js"
            ],
            "run_at": "document_end"
        },
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "anotherscript.js"
            ],
            "all_frames": true
        }
    ],
    "permissions": [
        "<all_urls>"
    ]
}

myscript.js

var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.facebook.com/plugins/like.php?href=http://allofrgb.blogspot.in/");
iframe.setAttribute("style", "border:none; width:150px; height:30px");
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("frameborder", "0");
document.body.appendChild(iframe);

anotherscript.js

iframes = document.getElementsByTagName("iframe");
for (iframe in iframes){
    console.log(iframes[iframe].src);
}
console.log("In another Script");

コンソールに記録されたメッセージを確認すると、メッセージが 2 回記録されていることがわかります ( documentlog + iframelog + [any number of optional iframes in pages]*)

anotherscript.js状態中に実行されるものは、動的に生成された iframe で実行されますが、いつでもchrome.tabs.executeScript()document idleを介してコンテンツ スクリプトを再実行できます。

懸念事項 2

Message Passing の使用は私にはうまくいきませんでした。また、メッセージングによって全体が非常に複雑になり、アプリケーションを単純な Web ページとして (つまり、拡張機能としてではなく) 使用できなくなるため、それを機能させるべきかどうかさえわかりません。なぜ気にするのですか？

何を達成したいですか？

于 2013-01-29T17:44:56.780 に答える
3

この質問を完全に忘れていました...最終的に、メッセージパッシングを使用してiframeと通信するアプローチ2を使用しましたが、かなりうまく機能します。コードを読むことに興味がある人のための拡張機能のレポは次のとおりです。

于 2014-02-19T20:58:00.860 に答える