Chrome扩展程序中的弹出窗口

编程入门行业动态更新时间:2024-10-28 06:34:41

本文介绍了Chrome扩展程序中的弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我正在编写一个Chrome扩展程序，当用户单击上下文菜单时，我想要弹出一个登录窗口，以便用户输入用户名和密码。在Chrome扩展中，我只能找到 chrome.pageAction.setPopup 和 chrome.browserAction.setPopup 可用于显示弹出式窗口窗口，但它们仅在单击页面操作的图标或浏览器操作图标时才显示弹出窗口，而不是上下文菜单。当然，我可以使用javascript提示框来做到这一点，但问题是无法在提示框中掩盖密码。所以我想知道是否有其他方法可以在Chrome扩展中创建一个弹出窗口。

谢谢！

解决方案

选择：

//developer.mozilla/en/DOM/window.showModalDialogrel =noreferrer> 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扩展程序）使用给定的参数（大小，网址，位置等）创建一个新窗口。
全部这些方法允许你（你的扩展）打开一个新的窗口/对话框，并处理该页面的逻辑。此页面应与您的扩展程序一起打包。请参阅消息传递将输入的数据传递给您的扩展程序。
演示
您的扩展程序中的选项卡可以直接访问背景使用 chrome.runtime.getBackgroundPage 。我将在本演示中演示此功能，以及传统的消息传递方式： >
{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
//处理密码请求 chrome.runtime.onMessage.addListener（function（request）{ if（request.type ==='request_password'）{ chrome.tabs.create（{ url：chrome.extension.getURL（'dialog.html'）， active ：false }，function（tab）{ //创建标签后，打开一个窗口注入标签 chrom e.windows.create（{ tabId：tab.id，类型：'popup'，聚焦：true //隐身，上，左，... }）; }）; } }）; 函数setPassword（password）{ //做某事，例如..： 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>对话测试< / title>< / head><体> < form> < input id =passtype =password> < input type =submitvalue =OK> < / form> < script src =dialog.js>< / script> < / body>< / html>
dialog.js
document.forms [0] .onsubmit = function（e）{ e.preventDefault（）; //防止提交 var password = document.getElementById（'pass'）.value; chrome.runtime.getBackgroundPage（function（bgWindow）{ bgWindow.setPassword（password）; window.close（）; //关闭对话框}）; };
已使用方法的文档

chrome.runtime.sendMessage（< request>，< function callback>）和 chrome.runtime.onMessage .addListener（<函数侦听器>）

chrome.extension.getURL（ < String path>）

chrome.runtime.getBackgroundPage（< function callback>）

chrome.tabs.create（< object createData> [，< function callback>]）

chrome.windows.create（< object createProperties> [，< function callback>]）

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!
解决方案
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 not use 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, ...).

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. 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>) 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>])