Javascript Chrome 扩展程序中的弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10340481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
popup window in Chrome extension
提问by chaohuang
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.setPopupand chrome.browserAction.setPopupcan 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.
我正在编写一个 Chrome 扩展程序，我希望在用户单击上下文菜单时弹出一个登录窗口，以便用户可以输入用户名和密码。在 Chrome 扩展中，我只发现chrome.pageAction.setPopup并且chrome.browserAction.setPopup可以用来显示弹出窗口，但它们仅在单击页面操作的图标或浏览器操作的图标时显示弹出窗口，而不是上下文菜单。当然，我可以使用javascript提示框来做到这一点，但问题是提示框中无法屏蔽密码。所以我想知道是否还有其他方法可以在 Chrome 扩展程序中创建弹出窗口。
Thanks!
谢谢！
回答by Rob W
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 notuse 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, ...).
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 扩展程序）使用给定的参数（大小、网址、位置等）创建一个新窗口。
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 passingto 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:
扩展程序中的选项卡可以使用 直接访问后台页面chrome.runtime.getBackgroundPage。我将在此演示中演示此功能，以及传统的消息传递方式：
manifest.json
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
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
open-dialog.js
if (confirm('Open dialog for testing?'))
chrome.runtime.sendMessage({type:'request_password'});
dialog.html
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
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>])
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>])
