Chrome扩展程序中的popup窗口
我正在编写Chrome扩展，当用户点击上下文菜单时，我想要popup一个login窗口，以便用户input用户名和密码。 在Chrome扩展中，我只发现了chrome.pageAction.setPopup和chrome.browserAction.setPopup可以用来显示popup窗口，但是只有当页面动作的图标或者浏览器动作的图标被点击时，才会popup窗口，而不是上下文菜单。 当然，我可以使用javascript提示框来做到这一点，但问题是密码不能在提示框中被屏蔽。 所以我想知道是否有其他的方式来在Chrome扩展中创build一个popup窗口。
谢谢！
挑选：
-
showModalDialog(<String url> [, <object arguments>])打开一个类似对话框的窗口，您可以在其中加载Chrome扩展中的页面。HTML可以使用。
不要使用showModalDialog， 它将从Chrome中删除 。 -
window.open(<String url> [, <String window_name>[, <String windowFeatures>]])
打开一个窗口，与前面的方法不同，它不会显示为对话框。 用户可以最小化窗口，并继续其他的东西。 -
chrome.windows.create(<object createData [, <function callback>]>)
（特定于Chrome扩展程序）使用给定的参数（大小，url，位置…）创build一个新窗口。
所有这些方法允许你（你的扩展）打开一个新的窗口/对话框，并处理该页面的逻辑。 这个页面应该和你的扩展一起打包。
请参阅消息传递以将input的数据传递给您的扩展。
演示
您的扩展程序中的选项卡可以使用chrome.runtime.getBackgroundPage直接访问后台页面。 我将在这个演示中演示这个function，以及传统的消息传递方式：
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.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 }); };
使用的方法的文档
-
chrome.runtime.sendMessage(<request>, <function callback>)和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>])
