Chrome 扩展程序中的弹出窗口 [英] popup window in Chrome extension

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

问题描述

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

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.

谢谢！

推荐答案

选择:

  • 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.

扩展程序中的标签可以使用 chrome 直接访问后台页面.runtime.getBackgroundPage.我将在此演示中演示此功能，以及传统的消息传递方式:

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:

{
  "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
    });
};

所用方法的文档