4

position:fixedページの下部にフローティング要素 (つまり) を挿入する必要があるクロム拡張機能を作成しています。私の要件は次のとおりです。

  • その中の要素にコンテンツ スクリプトからアクセスする必要があります。
    これは、ユーザーがフローティング バーから現在のタブでアクションを実行できるように、ボタンにイベントを関連付けるためです。
  • スタイルが現在のページのスタイルから独立したままであることを望みます。

これまでのところ、3 つの解決策を試しましたが、何も思いつきませんでした。

  1. 固定の html 要素を挿入するコンテンツ スクリプト。
    このソリューションの問題は、ページのスタイルと要素のスタイルが互いに影響し合い、Web ページが要素のスタイルに影響を与えたり、その逆になることです。

  2. iframe を挿入するコンテンツ スクリプト。
    ここでの問題は、iframe を作成したコンテンツ スクリプトから iframe 内の要素にアクセスすることは不可能であり、一方でクロム拡張では、動的に挿入された iframe 内でコンテンツ スクリプトを実行することはできません (たとえ を使用している場合でもall_frames: true)。

  3. Devtool パネルの拡張
    すべてのページにパネルを表示する必要があったため、これは私のニーズには合いませんでした。たとえば、ユーザーはいくつかのタブを開いてすべてのタブに my 要素を持たせるアクションを実行できます。devtool パネルで、ユーザーはすべてのタブで手動で devtoold を開く必要があります。

お知らせ下さい。

4

2 に答える 2

22

3 つのアプローチの提案

固定の html 要素を挿入するコンテンツ スクリプト

はい、指定されたスタイルは Web ページでは一般的すぎます

元： 

div { 
   border:none;
}

id(s) とクラスのまれな組み合わせを css に割り当てても、コンテンツ スクリプト要素に影響します。解決策は、非常に面倒な css を使用してすべてのスタイルを指定 (または) オーバーライドすることです

例:エラーが発生しやすく扱いにくいすべてのスタイルをオーバーライドします。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

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を介してコンテンツ スクリプトを再実行できます。

Devtool パネルの拡張

問題を明確に特定したので、代わりにそれを排除します。

于 2013-01-12T11:36:14.547 に答える
-9

Sudarshanがコメントしたように、ここではiframeがベストプラクティスです。

iframe内でスクリプトを実行するために、プラグイン内にiframe.htmlとscript.jsを含めるだけです。私のコンテンツスクリプトでは、iframeを取得しましたchrome.extension.getURL('iframe.html')（バックグラウンドスクリプトのみがこのAPIにアクセスできるため、メッセージパッシングを使用しました）。スクリプトは、次のようにiframe内に相対スクリプトタグとして含まれていました。<script src="script.js"></script>

私にとって驚くべき部分は、script.jsがマニフェストに含まれていなくても、chrome apiにアクセスでき、さらに重要なことに、私の場合はバックグラウンドスクリプトにメッセージを送信できることです。

于 2013-01-16T22:47:57.303 に答える