Test Page for Test Chrome Popup Extension

Philip Dorrell, 19 August, 2013

test-popup-extension

test-popup-extension is a template for a Chrome browser extension where a popup windows acts on the contents of the target tab.

This test page lets you load the popup directly, i.e. without having to install (or reload) the Chrome extension.

How to Run the Extension Code Outside of the Extension

test-popup-extension is configured so that you can run the extension code during development without installing the extension. You don't even have to be running in Chrome or Chromium.

There are three ways you can do this:

• Click this button: Create Title Editor Window
• Load this page with the load query, i.e. index.html?load.
• Load the page index_load.html, which redirects to index.html?load. (This is a useful option when the browser command line refuses to let you include characters like "?" in the URL argument.)

Enabling Popups

If you click the button to create the popup, it gets created, no questions asked. Same thing when you click the browser action button for the installed browser extension. But if you load this page with the ?load query string, then the popup is created via Javascript, something that web browsers do not enable by default (due to the potential for abuse from web pages that create a thousand popups each time you visit).

During development of your own popup, you probably do want to see the popup as soon as possible each time you load the test page, i.e., no clicking on buttons, and no telling the browser "Allow popups from ..." etc. When developing against Chrome (or Chromium), which is the browser that is going to be running your extension, you can use the command line parameter --disable-popup-blocking to get confirmation-free opening of popup windows from your Javascript.

How to Install the Extension

Chrome makes it very easy to install an extension during development – you go to the "Extensions" page in the browser (under the "Tools" menu), and tell it to "Load unpacked extension ...".

The test-popup-extension project has all the extension files in the extension subdirectory, so that's the directory you load the unpacked extension from.

How the Popup Window Performs Actions on the Target Tab

What makes popup windows in Chrome extensions slightly difficult is that the Chrome browser does not allow access to window.opener. Instead, all communication between windows must be via chrome.runtime.onMessage and chrome.tabs.sendMessage.

test-popup-extension deals with the differences between normal popup windows and extension popup windows by defining functionality on the content tab in the form of an object which can be executed either "locally", or "remotely" via the Chrome extension messaging API.

For details of how this is done, see the source code. A brief summary is:

• Define a target object representing actions to be performed on the content (target) tab (in this case TitledWindow).
• Define all "public" methods on the target object with two parameters: a request object, and a result handler (in this case, the getPageDetails and setWindowTitle methods). The request object wraps actual parameter values, and the result handler is used to process the result of the method (i.e. instead of using return).
• In the popup window's Javascript, define a proxy for the target object which has the same public method signatures, but which implements the methods by sending messages to the content tab (in this case TitledWindowProxy).
• In the content tab's Javascript, define a handler for messages, which passes them on to the local target object, and then passes the results back to the result handler of the message handler.