google-chrome-extension - la fenêtre popup en extension Chrome

91

Choisir:
- ^{showModalDialog(<String url> [, <object arguments>])
  
  Ouvre une boîte de dialogue de la fenêtre, dans laquelle vous pouvez charger une page à l'intérieur de votre extension chrome. HTML peut être utilisé.}
  
  Ne pas utilisation showModalDialog, il va être supprimé à partir de Chrome.
- window.open(<String url> [;, <String window_name> [;, <String windowFeatures>]])
  
  Une fenêtre s'ouvre, qui, contrairement à la méthode précédente, n'apparaît pas comme une boîte de dialogue. L'utilisateur peut réduire la fenêtre, et continuer avec quelque chose d'autre.
- chrome.de windows.créer(<object createData [, <la fonction de callback>]>)
  
  (Spécifique pour les extensions de Chrome) Créer une nouvelle fenêtre, avec des arguments donnés (taille, url, position, ...).
L'ensemble de ces méthodes permet de vous (votre extension) pour ouvrir une nouvelle fenêtre de dialogue, et de gérer la logique de cette page. Cette page doit être emballé avec votre extension.

Voir La transmission de Message pour transmettre les données saisies à votre poste.

Démo

Onglets au sein de votre extension de l'accès direct à la page d'arrière-plan à l'aide de chrome.moment de l'exécution.getBackgroundPage. Je vais illustrer cette fonctionnalité dans cette démo, ainsi que d'une façon conventionnelle de passage de 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
    });
};
```
De la Documentation pour les méthodes utilisées
- Salut, Rob, merci pour votre réponse. C'est très utile. Mais je n'ai trouvé comment faire de la transmission de messages entre l'arrière-plan de la page et le contenu des scripts, donc, pourriez-vous me dire comment faire pour communiquer entre la boîte de dialogue de la fenêtre et de la page d'arrière-plan, de sorte que le imputé nom d'utilisateur et le mot de passe peut être renvoyé à la page d'arrière-plan pour faire une demande pour un jeton OAuth 2.0? Merci encore!
- Ajouté démo.
- Est-il de toute façon je peux coller le menu de la fenêtre de l'onglet en cours où il a été lancé. C'est un stand alone de la fenêtre popup actuellement.
- Entendez-vous ajouter à la barre d'onglets (utiliser chrome.tabs.create) ou la page en cours (ne pas faire)?
- Dans la page en cours, pas dans un nouvel onglet. Je ne veux pas les utilisateurs à s'éloigner de la page en cours. Donc, comme un petit popup show peut être sur le côté droit de la page ou en bas à droite ou même haut à droite comme navigateur d'action popup. Je viens de poster une question, qui peut vous donner plus de détails peut-être. stackoverflow.com/questions/35875730/...
- Qu'entendez-vous par l'expression "onglets à l'intérieur de votre extension"? Aussi, est-il un moyen d'arrêter la diffusion de la nature de la "google chrome.moment de l'exécution.sendMessage", l'envoi de la demande seulement à l'arrière-plan d'exécution?
- Les onglets dans le navigateur avec l'URL d'une page à partir de votre extension, par exemple chrome-extension://extensionid/page.html. Vous ne pouvez pas modifier la diffusion de la nature de chrome.runtime.sendMessage, mais comme une alternative, vous pouvez utiliser chrome.runtime.connect pour établir un canal de message (port de) l'une des destinations spécifiques, et l'utilisation du port de postMessage et onMessage Api pour communiquer.
InformationsquelleAutor Rob W

Vous devez vous connecter pour publier un commentaire.

Démo

`manifest.json`

`background.js`

`open-dialog.js`

`dialog.html`

`dialog.js`

De la Documentation pour les méthodes utilisées