Chrome拡張機能：IFrameとその中のクリックをリッスンします

ウェブサイトの本体にiframe（私の内線の一部であるframe.html）を挿入し、その中の2つのボタンのクリックイベントを受け取ることができます。同一生成元ポリシーの問題に実行Chrome拡張機能：IFrameとその中のクリックをリッスンします

など

私は、このため、比較的優雅な回避策があると確信しているが、私はそれを見つける多くの幸運を持っていませんよ。

出典

2011-12-14 NoPyGod

あなたはインラインフレームを使用する必要がありますか？絶対に必要なものではない場合は、htmlをウェブサイトに直接挿入するだけで、このような頭痛を避けることができます。 – lakenen

ウェブサイトには、私が挿入しようとしているコンテンツの繊細なレイアウトをねじ込むカスタムCSSがたくさんあります。そして、私が今すぐokに見えるようにしても、ウェブサイトのCSSが変更されず、再度それをねじ込むという保証はありません。猫とマウスをしゃべることに熱心ではありません。 – NoPyGod

正直なところ、これは不可能であると私は軽度確信しています。基本的にすべての要素からすべてのスタイルを取り除くcss "catch-all"を使用することを検討することもできます。それはハッキー（と退屈な）、私が知っているようだが、この場合はあなたの唯一のオプションかもしれません。 – lakenen

message eventsを使用すると、注入されたiframeウィンドウにコンテンツスクリプト（約security）が通信できるようになります。

ここは簡単な例です。拡張機能は、コンテンツスクリプトを介して表示されたすべてのページにIFRAME要素を挿入します。フレームにはボタン付きのページが含まれています。ボタンには、トップウィンドウにメッセージを送信するクリックハンドラがあります。コンテンツスクリプトにはiframeからのメッセージに対するリスナーがあり、メッセージデータを表示する警告が表示されます。

manifest.jsonを：

{ 
    "name": "Test", 
    "version": "0.0.1", 
    "content_scripts": [ { 
    "matches": [ "http://*/*", "https://*/*" ], 
    "js": [ "content.js" ], 
    "run_at" : "document_end" 
    } ] 
}

content.js：

var iframe = document.createElement("iframe");  
iframe.src = chrome.extension.getURL("iframe.html"); 
document.body.appendChild(iframe); 

addEventListener("message", function(event) { 
    if (event.origin + "/" == chrome.extension.getURL("")) 
    alert(event.data); 
}, false);

Iframe.htmlの：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    <button id="button">Click me!</button> 
    <script> 
    document.getElementById("button").addEventListener("click", function() { 
     top.postMessage("clicked!", "*"); 
    }, false); 
    </script> 
</body> 
</html>

出典

2011-12-15 20:22:27

すばらしく見えますが、まもなくこれを試していきます。 – NoPyGod

Chrome拡張機能：IFrameとその中のクリックをリッスンします

答えて

関連する問題