2016-10-06 4 views
1

chrome-extensionのポップアップにあるiframeと対話しようとしています。私はcontent.jsがmanifest.jsonを使ってすべてのフレームに挿入できることを知っていますが、Webページ内のフレームで機能していて、拡張機能のポップアップ内では機能していません。chrome-extensionポップアップのiframe内のcontent.js

これは可能ですか?私は多くのことを試しましたが、解決策はまだ見つかりませんでした。

私のマニフェスト:

{ 
"name" :"test", 
"version": "1.0", 
"manifest_version": 2, 
"description" :"Scraping Facebook", 
"permissions": [ 
    "cookies", 
    "background", 
    "tabs", 
    "http://*/*", 
    "https://*/*", 
    "storage", 
    "unlimitedStorage" 
], 
"icons": { "128": "images/pint.png" }, 
"content_scripts": [ 
    { 
    "matches": [ 
     "http://*/*", 
     "https://*/*" 
    ], 
    "js": ["jquery-3.1.0.min.js","content.js"], 
    "run_at":"document_end" 
    } 
], 
"web_accessible_resources": [ 
    "http://*/*", 
    "https://*/*", 
    "styles/*", 
    "fonts/*" 
], 
"background": { 
    "scripts": ["background.js"] 
    }, 
"browser_action" : 
    { 
     "default_popup": "popup.html", 
     "default_title": "test" 
    } 
} 
+0

こんにちは、私はあなたが – hadesMM

+0

にコンテンツスクリプトを挿入しようとしています私のmanifest.jsonを追加自分の内線番号またはその他の内線番号のポップアップ内のiframe?あなたの 'browser_action'に* popup.html *が存在することによってあなた自身のものであることは暗示されていますが、明示的には述べられていません。 – Makyen

+0

トピックになるように[編集]してください:問題を複製する**完全な** [mcve]を含めてください。通常、* manifest.json *、バックグラウンド、コンテンツ、ポップアップスクリプト、HTMLの一部が含まれます。 (「?取り組んこのコードではありませんなぜ** **」)のデバッグ助けを求める質問が含まれている必要があります問題の►the望ましい動作、►a特定の問題やエラー*と*それを再現するために必要な►the最短コード**を自体**。明確な問題文がない質問は、他の読者にとって有用ではありません。参照してください: "**どのように[mcve] **を作成するか"、[ここで私はどんな話題を聞くことができますか?](http://stackoverflow.com/help/on-topic)、[ask] – Makyen

答えて

4

使用"all_frames": trueポップアップ内部のiframeに注入するためにあなたのコンテンツスクリプト宣言で:コンテンツスクリプトが開始:

"content_scripts": [{ 
    "matches": [ "http://example.com/*" ], 
    "js": [ "content.js" ], 
    "all_frames": true 
}], 

次にあなたがmessagingを使用することができますポップアップスクリプトはリスナーを登録します。

  • 些細なワンタイムのsendMessage:

    content.js:

    chrome.runtime.sendMessage('test', function(response) { 
        console.log(response); 
    ); 
    

    popup.js:

    chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { 
        console.log('popup got', msg, 'from', sender); 
        sendResponse('response'); 
    }); 
    
  • 長期性ポート:

    コンテンツ.js:

    var port = chrome.runtime.connect({name: 'test'}); 
    port.onMessage.addListener(function(msg, port) { 
        console.log(msg); 
    }); 
    port.postMessage('from-iframe'); 
    

    popup.js:

    var iframePort; // in case you want to alter its behavior later in another function 
    
    chrome.runtime.onConnect.addListener(function(port) { 
        iframePort = port; 
        port.onMessage.addListener(function(msg, port) { 
         console.log(msg); 
        }); 
        port.postMessage('from-popup'); 
    }); 
    

そしてpopup.html:

<html> 
    <head> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    <iframe width="500" height="500" src="http://example.com"></iframe> 
    </body> 
</html> 
+0

詳細な回答ありがとうございます – hadesMM

関連する問題