Detect that code is running as a Chrome extension, from a remote site, within iframe

Question

Question: is it possible to detect if js code running on a remote site is being called from within an iframe in a Chrome extension? I have a remote website where I, when called as a Chrome extension, want to override a couple behaviors, and instead use chrome.runtime.sendMessage and chrome.runtime.onMessageExternal to send a command back to the extension.

In my popup.html i have this:

<iframe src="http://localhost" width="100%" height="100%" frameborder="0"></iframe>

In my js on the remote site (localhost for testing), i have this:

$(document).ready(function () {
    if (someHowCheckIfIAmBeingCalledFromAChromeExtension == true) { //what do I put here?
    {
        // The ID of the extension we want to talk to.
        var extensionId = "abc";

        // Make a simple request:
        chrome.runtime.sendMessage(extensionId, { message: "connected!" },
          function (response) {
              if (!response.success)
                  handleError(message);
          });
    }
}
});

In my popup.js I have:

chrome.runtime.onMessageExternal.addListener(
  function (request, sender, sendResponse) {
     //do something with request.message
});

Is this in any way possible or not? I have looked at many other articles and questions that kinda talk about what I am trying to do, but non set me on the right track exactly.

Thanks!

Answer 1

I solved this the following way:

1. Pointed the iframe in popup.html to localhost/index?extension=chrome

2. Added the following jquery to index on the remote/localhost site:

    $(document).ready(function () { //check if query string is present if (getParameterByName('extension') == 'chrome') { var extensionId = "abc"; //append the query string of each link on the page to make sure the site stays in "extension mode" $('a').each(function () { var _href = $(this).attr('href'); var _newHref; if (_href.indexOf('?') >= 0) { _newHref = _href + '&extension=chrome'; } else { _newHref = _href + '?extension=chrome'; } $(this).attr("href", _newHref); }); //after this line I catch/change/override any behavior I want to change when the site is used form within the extension //Then, I use chrome.runtime.sendMessage to send any custom commands to the extension } }); 

3. Then, in popup.js I have to following:

    chrome.runtime.onMessageExternal.addListener( function (request, sender, sendResponse) { //do something with the caught behavior }); //If you want to make the website snap out of "extension mode", //clean all urls with this function when forwarding urls/opening tabs from the extension. //The website will then function as usual, stripped of all the extension specific behaviour. function cleanChromeExtensionQueryString(url) { var cleaned; if (url.indexOf('?extension=chrome') >= 0) { cleaned = url.replace('?extension=chrome', ''); } else if (url.indexOf('&extension=chrome') >= 0) { cleaned = url.replace('&extension=chrome', ''); }; return cleaned; } 

This method allows me to reuse a responsive web site as a Chrome extension while still being able to modify certain behaviors so they become more "extension-esque" :-).

This overall approach is not suitable for all scenarios of course but it happend to work for my current project. I other cases you'll be better off just creating the extension from scratch.