Chrome 扩展程序中的弹出窗口

IT技术 javascript google-chrome-extension popup
2021-02-18 22:55:11

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

谢谢!

1个回答

挑选:

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

演示

扩展程序中的选项卡可以使用 直接访问后台页面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);
};

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

所用方法的文档

@Vidit 你是说添加到标签条(使用chrome.tabs.create)还是在当前页面(不要这样做)?
2021-04-15 22:55:11
@RobW - 无论如何我可以将弹出窗口粘贴到启动它的当前选项卡上。它目前是一个独立的弹出窗口。
2021-04-17 22:55:11
@RobW,您所说的“扩展程序中的选项卡”是什么意思?另外,有没有办法停止“chrome.runtime.sendMessage”的广播性质,只将请求发送到后台运行时?
2021-04-25 22:55:11
嗨,罗布,感谢您的回复。这是非常有帮助的。但是我只找到了如何在后台页面和内容脚本之间进行消息传递,所以你能告诉我如何在类似对话框的窗口和后台页面之间进行通信,以便将推算的用户名和密码发送回后台页面进行在 OAuth 2.0 中请求令牌?再次感谢!
2021-05-03 22:55:11
@RobW 在当前页面中,而不是在新选项卡中。我不希望用户离开当前页面。所以就像一个小的弹出显示可能在页面的右侧或右下角甚至右上角,就像浏览器操作弹出窗口一样。我刚刚发布了一个问题,也许可以为您提供更多详细信息。stackoverflow.com/questions/35875730/...
2021-05-09 22:55:11