javascript扩展程序中的弹出窗口

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

谢谢!

挑选:

> showModalDialog(<String url> [, <object arguments>])
打开一个类似对话的窗口,您可以在其中加载Chrome扩展中的页面。可以使用HTML。
不要使用showModalDialog,it is going to be removed from Chrome
> window.open(<String url> [, <String window_name>[, <String windowFeatures>]])
打开一个窗口,与以前的方法不同,它不会显示为对话框。用户可以最小化窗口,并继续其他。
> chrome.windows.create(<object createData [, <function callback>]>)
(特定于Chrome扩展)使用给定的参数(大小,网址,位置,…)创建一个新窗口。

所有这些方法允许您(您的扩展)打开一个新的窗口/对话框,并处理该页面的逻辑。此页面应与您的扩展程序一起打包。
请参阅Message passing将输入的数据传递给您的分机。

演示

您的分机中的标签可以使用chrome.runtime.getBackgroundPage直接访问背景页面。我将在此演示中演示此功能,以及传统的消息传递方式:

的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);
};

开放式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
    });
};

已使用的方法的文档

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

http://stackoverflow.com/questions/10340481/popup-window-in-chrome-extension

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript扩展程序中的弹出窗口