web-dev-qa-db-fra.com

fenêtre contextuelle dans Chrome

J'écris une extension Chrome, et je veux qu'une fenêtre de connexion apparaisse lorsque les utilisateurs cliquent sur le menu contextuel afin que l'utilisateur puisse entrer le nom d'utilisateur et le mot de passe. Dans Chrome extension, je n'ai trouvé que chrome.pageAction.setPopup et chrome.browserAction.setPopup peut être utilisé pour afficher les fenêtres contextuelles, mais elles ne s'affichent que lorsque l'utilisateur clique sur l'icône de l'action de page ou sur l'icône de l'action du navigateur, pas sur le menu contextuel. Bien sûr, je peux utiliser la boîte d'invite javascript pour ce faire, mais le problème est que le mot de passe ne peut pas être masqué dans la boîte d'invite. Je me demande donc s'il existe d'autres moyens de créer une fenêtre contextuelle dans l'extension Chrome.

Merci!

javascriptgoogle-chrome-extensionpopup
32
chaohuang

Prends et choisis:

Toutes ces méthodes vous permettent (à votre extension) d'ouvrir une nouvelle fenêtre/boîte de dialogue et de gérer la logique de cette page. Cette page doit être fournie avec votre extension.
Voir Passage de message pour transmettre les données saisies à votre poste.

Démo

Les onglets de votre extension ont un accès direct à la page d'arrière-plan en utilisant chrome.runtime.getBackgroundPage . Je vais démontrer cette fonctionnalité dans cette démo, ainsi qu'une manière conventionnelle de passer des messages:

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 des méthodes utilisées

91
Rob W