发表新帖
发表新帖

popup window in Chrome extension

后端 未结
关注
1 1703
夕颜
夕颜 2020-11-28 18:39

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 exten

1条回答
  • 盖世英雄少女心
    盖世英雄少女心 (楼主)
    2020-11-28 19:07

    Pick and choose:

    • showModalDialog( [, ])
      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( [, [, ]])
      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(]>)
      (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": [""],
      "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

      Dialog test

      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(, ) and chrome.runtime.onMessage.addListener()
      • chrome.extension.getURL()
      • chrome.runtime.getBackgroundPage()
      • chrome.tabs.create( [, ])
      • chrome.windows.create( [, ])

        0 讨论(0)
         看不清?
        提交回复
        热议问题