Menu
I am writing a Chrome extension, and I want a login window to be popped up when users click on the context menu so that user can input username and password. In Chrome extension, I only found chrome.pageAction.setPopup and chrome.browserAction.setPopup can be used to show popup windows, but they show popups only when the page action's icon or browser action's icon is clicked, not the context menu. Of course, I can use javascript prompt box to do this, but the problem is the password cannot be masked in the prompt box. So I am wondering if there are some other ways to create a popup window in Chrome extension.
Thanks!
860
They've set the default shortcut to Ctrl+D . Activating this command will perform a click on the page (or browser) action, opening the popup or whatever the action is configured to do.
Pick and choose:
showModalDialog(<String url> [, <object arguments>])window.open(<String url> [, <String window_name>[, <String windowFeatures>]])chrome.windows.create(<object createData [, <function callback>]>)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.
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 passwords chrome.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.jsif (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.jsdocument.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 }); }; chrome.runtime.sendMessage(<request>, <function callback>) and chrome.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>])
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
