popup window in Chrome extension
Pick and choose:
showModalDialog(<String url> [, <object arguments>])
Opens a dialog-like window, in which you can load a page within your chrome extension. HTML can be used.
Do not use showModalDialog, it is going to be removed from Chrome.window.open(<String url> [, <String window_name>[, <String windowFeatures>]])
Opens a window, which, unlike the previous method, does not appear as a dialog. The user can minimize the window, and continue with something else.chrome.windows.create(<object createData [, <function callback>]>)
(Specific to Chrome extensions) Create a new window, with given arguments (size, url, position, ...).
All of these methods allows you (your extension) to open a new window/dialog, and handle the logic from that page. This page should be packaged with your extension.
See Message passing to pass the entered data to your extension.
Demo
Tabs within your extension have direct access to the background page using chrome.runtime.getBackgroundPage. I'll demonstrate this feature in this demo, as well as a conventional way of message passing:
manifest.json
{ "name": "Dialog tester", "version": "1.0", "manifest_version": 2, "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts": [{ "matches": ["<all_urls>"], "js": ["open-dialog.js"] }]}background.js
// Handle requests for passwordschrome.runtime.onMessage.addListener(function(request) { if (request.type === 'request_password') { chrome.tabs.create({ url: chrome.extension.getURL('dialog.html'), active: false }, function(tab) { // After the tab has been created, open a window to inject the tab chrome.windows.create({ tabId: tab.id, type: 'popup', focused: true // incognito, top, left, ... }); }); }});function setPassword(password) { // Do something, eg..: console.log(password);};open-dialog.js
if (confirm('Open dialog for testing?')) chrome.runtime.sendMessage({type:'request_password'});dialog.html
<!DOCTYPE html><html><head><title>Dialog test</title></head><body><form> <input id="pass" type="password"> <input type="submit" value="OK"></form><script src="dialog.js"></script></body></html>dialog.js
document.forms[0].onsubmit = function(e) { e.preventDefault(); // Prevent submission var password = document.getElementById('pass').value; chrome.runtime.getBackgroundPage(function(bgWindow) { bgWindow.setPassword(password); window.close(); // Close dialog });};Documentation for used methods
chrome.runtime.sendMessage(<request>, <function callback>)andchrome.runtime.onMessage.addListener(<function listener>)chrome.extension.getURL(<String path>)chrome.runtime.getBackgroundPage(<function callback>)chrome.tabs.create(<object createData> [, <function callback>])chrome.windows.create(<object createProperties> [, <function callback>])