Search code examples
google-chrome-extensionmessage-passing

How do I pass back data from a remote window to a chrome extension's background page?


I have a chrome extension, and from my background page I open a remote window:

chrome.windows.create({
        type : 'popup',
        url : "https://www.example.com/mypage.html"
    }, function(newWindow) {

    });

On my remote page (https://www.example.com/mypage.html) I am waiting for the user to perform an action. When this action is performed, I need to pass back to the extension some data.

How can I do this? I could not find anything relevant in the docs (http://developer.chrome.com/extensions/messaging.html)


Solution

  • It is basically possible. What you should do is to use the content script as a bridge between your newly created window and your background script. For example:

    Your background script:

    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
        alert("message received");
    });
    chrome.windows.create({
        type : 'popup',
        url : "http://yoursite.com/page.html",
        type: "popup"
    }, function(newWindow) {
    
    });
    

    Your content script:

    document.addEventListener("hello", function(data) {
        chrome.runtime.sendMessage("test");
    })
    

    page.html:

    <script>
        var go = function() {
            var event = document.createEvent('Event');
            event.initEvent('hello');
            document.dispatchEvent(event);
        }
    </script>
    <a href="javascript:go();">Click me</a>
    

    So, the idea is to dispatch an event from the page using document object. The content script listens for that event and once occur send a message to the background script where your code is originally.