wyskakujące okno w rozszerzeniu Chrome

Question

wyskakujące okno w rozszerzeniu Chrome

Piszę rozszerzenie Chrome i chcę, aby okno logowania pojawiło się, gdy użytkownicy klikną menu kontekstowe, aby użytkownik mógł wprowadzić nazwę użytkownika i hasło. W rozszerzeniu Chrome znalazłem tylko chrome.pageAction.setPopup i chrome.browserAction.setPopup mogą być używane do wyświetlania okien wyskakujących, ale pokazują wyskakujące okienka tylko wtedy, gdy ikona akcji strony lub ikona akcji przeglądarki jest kliknięta, a nie menu kontekstowe. Oczywiście mogę użyć javascript prompt box, aby to zrobić, ale problem polega na tym, że hasło nie może być maskowane w oknie prompt. Więc jestem zastanawiasz się, czy istnieją inne sposoby tworzenia wyskakującego okna w rozszerzeniu Chrome.

Dzięki!

29

javascript google-chrome-extension popup

Author: chaohuang, 2012-04-26

Source

1 answers

score 87 · Accepted Answer

Wybierz i wybierz:

^{showModalDialog(<String url> [, <object arguments>])

Otwiera okno dialogowe podobne do okna, w którym można załadować stronę w ramach rozszerzenia chrome. HTML może być używany.}
Do Nie użyj showModalDialog, zostanie on usunięty z Chrome .
window.open(<String url> [, <String window_name>[, <String windowFeatures>]])
Otwiera okno, które w przeciwieństwie do poprzedniej metody nie pojawia się jako okno dialogowe. Użytkownik może zminimalizować okno i kontynuować coś else.
chrome.windows.create(<object createData [, <function callback>]>)
(Specyficzne dla rozszerzeń Chrome) Utwórz nowe okno z podanymi argumentami (rozmiar, adres url, pozycja, ...).

Wszystkie te metody pozwalają (Twoje rozszerzenie) otworzyć nowe okno / okno i obsługiwać logikę z tej strony. Ta strona powinna być spakowana wraz z Twoim rozszerzeniem.
Zobacz przekazywanie wiadomości , aby przekazać wprowadzone dane do rozszerzenia.

Demo

Zakładki wewnątrz rozszerzenia mają bezpośredni dostęp do strona tła za pomocą chrome.runtime.getBackgroundPage. W tej wersji demonstracyjnej zademonstruję tę funkcję, a także konwencjonalny sposób przekazywania wiadomości: {]}

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

Dokumentacja stosowanych metod