Как передать данные из инъецированного скрипта контента в iframe?

Question

Это мое первое время, развивающее расширение хром, и, честно говоря, я даже не уверен, что это правильный шаблон дизайна.

У моего расширения Chrome есть кнопка на панели инструментов. Когда эта кнопка нажата, я хочу переключить iframe прямо на активную веб-страницу.

Я получил эту часть не работает без проблем:

manifest.json

{ 
    "manifest_version":   2, 
    "description":    "Inject a complete, premade web page", 
    "name":      "Inject whole web page", 
    "version":     "1", 
    "web_accessible_resources": ["html/price-snipe-iframe.html"], 
    "permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
    ], 
    "background": { 
    "scripts": ["js/lib/jquery.min.js", "background.js"] 
    }, 
    "browser_action": { 
    "default_icon": { 
     "19": "icons/action19x19.png", 
     "38": "icons/action38x38.png" 
    }, 
    "default_title": "Price Sniper" 
    } 
} 

background.js

chrome.browserAction.onClicked.addListener(function(tab) { 

    chrome.tabs.insertCSS(null, { 
    file: "css/global.css" 
    }); 
    chrome.tabs.executeScript(tab.id, { file: "js/lib/jquery.min.js" }); 
    chrome.tabs.executeScript(tab.id, { file: "iframe-injector.js" }); 

}); 

Iframe-injector.js

var snipeBar = $('#price-snipe-bar'); 

if (! $('#price-snipe-bar').length) { 
    var iFrame = document.createElement("iframe"); 
    iFrame.src = chrome.extension.getURL("html/price-snipe-iframe.html"); 
    iFrame.id = "price-snipe-bar"; 
    iFrame.innerHTML = "<h1>GOT IT?</h1>" 

    document.body.insertBefore(iFrame, document.body.firstChild); 

    $('body').css({ 'margin-top': '43px'}); 
} else { 
    $('#price-snipe-bar').remove(); 
    $('body').css({ 'margin-top': ''}); 
} 

Здесь я просто вижу, существует ли iframe, и если я его не вставляю.

То, что мне действительно нужно сделать, это получить изображения с активной или текущей вкладки/страницы и ввести их в iframe.

Есть ли способ сделать это, или есть лучший образец для этого?

Answer 1

В документе создается новый iframe.

Его происхождение - chrome-extension://..., поэтому он должен иметь полный доступ к API Chrome.

Вы можете использовать Messaging из сценариев этого фрейма, чтобы связаться со своим скриптом контента и запросить данные.

Единственная сложная задача - пройти по правильному значку вкладки, но вы можете сделать это с помощью passing it to the content script first, а затем создать в URL-адрес фрейм с идентификатором табуляции в качестве параметра.