javascript - google - ventana emergente en la extensión de Chrome
extension google chrome developer (1)
Estoy escribiendo una extensión de Chrome, y quiero que aparezca una ventana de inicio de sesión cuando los usuarios hagan clic en el menú contextual para que el usuario pueda ingresar el nombre de usuario y la contraseña. En la extensión de Chrome, solo encontré chrome.pageAction.setPopup y chrome.browserAction.setPopup se pueden usar para mostrar ventanas emergentes, pero muestran ventanas emergentes solo cuando se hace clic en el icono de acción de la página o en el de acción del navegador, no en el menú contextual. Por supuesto, puedo usar el cuadro de solicitud de javascript para hacer esto, pero el problema es que la contraseña no se puede enmascarar en el cuadro de solicitud. Así que me pregunto si hay otras formas de crear una ventana emergente en la extensión de Chrome.
¡Gracias!
Escoge y elige:
-
showModalDialog(<String url> [, <object arguments>])Abre una ventana similar a un diálogo, en la que puede cargar una página dentro de su extensión de Chrome.HTML puede ser utilizado.
No use showModalDialog, se eliminará de Chrome . -
window.open(<String url> [, <String window_name>[, <String windowFeatures>]])
Abre una ventana que, a diferencia del método anterior, no aparece como un cuadro de diálogo. El usuario puede minimizar la ventana, y continuar con otra cosa. -
chrome.windows.create(<object createData [, <function callback>]>)
(Específico para las extensiones de Chrome) Crea una nueva ventana, con los argumentos dados (tamaño, url, posición, ...).
Todos estos métodos le permiten a usted (su extensión) abrir una nueva ventana / diálogo y manejar la lógica desde esa página. Esta página debe estar empaquetada con su extensión.
Consulte Paso de mensajes para pasar los datos ingresados a su extensión.
Manifestación
Las pestañas dentro de su extensión tienen acceso directo a la página de fondo usando chrome.runtime.getBackgroundPage . Mostraré esta característica en esta demostración, así como una forma convencional de pasar mensajes:
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
});
};
Documentación de los métodos utilizados.
-
chrome.runtime.sendMessage(<request>, <function callback>)ychrome.runtime.onMessage.addListener(<function listener>) -
chrome.extension.getURL(<String path>) - chrome.runtime.getBackgroundPage
-
chrome.tabs.create(<object createData> [, <function callback>]) -
chrome.windows.create(<object createProperties> [, <function callback>])