Chrome扩展程序中的弹出窗口
[英]popup window in Chrome extension
问题描述
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. 
我正在编写Chrome扩展程序，当用户点击上下文菜单时，我希望弹出一个登录窗口，以便用户可以输入用户名和密码。 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. 在Chrome扩展程序中，我只找到chrome.pageAction.setPopup和chrome.browserAction.setPopup可用于显示弹出窗口，但只有在单击页面操作的图标或浏览器操作图标时才显示弹出窗口，而不是上下文菜单。 Of course, I can use javascript prompt box to do this, but the problem is the password cannot be masked in the prompt box. 当然，我可以使用javascript提示框来执行此操作，但问题是密码无法在提示框中屏蔽。 So I am wondering if there are some other ways to create a popup window in Chrome extension. 所以我想知道是否还有其他方法可以在Chrome扩展程序中创建弹出窗口。
Thanks! 谢谢！
1 个解决方案
解决方案1
91 已采纳 2012-04-26 20:39:20
Pick and choose: 挑选：
-
showModalDialog(<String url> [, <object arguments>])Opens a dialog-like window, in which you can load a page within your chrome extension.打开一个类似对话框的窗口，您可以在其中加载Chrome扩展程序中的页面。HTML can be used.可以使用HTML。
Do not use showModalDialog, it is going to be removed from Chrome .不要使用在showModalDialog， 它会从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, ...).（特定于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 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 . 扩展程序中的标签可以使用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.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.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>])
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.