Documentation for used methods

Question

173

popup window in Chrome extension

rated 0 times [ 180] [ 7] / answers: 1 / hits: 105475 / 12 Years ago, thu, april 26, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

adrianobeds

Add To Favorites

Follow

Total Points: 558

Total Questions: 118

Total Answers: 116

Location: Luxembourg

Member since Tue, Jan 25, 2022

2 Years ago

answered 12 Years ago mckinleykeyshawnb · Accepted Answer

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