Extension Chrome boîte de dialogue modale ou une autre solution pour avertir les utilisateurs?

J'ai donc créé une extension chrome quand on clique dessus ouvre une fenêtre pour les utilisateurs d'enregistrer les courants onglet capture d'écran.

Capture d'écran:

Le problème est que lorsque je aller dans un autre onglet et revenir à l'onglet où l'extension de la fenêtre était ouverte, la fenêtre n'est plus là (même si il joue encore capture d'écran de création). De ce fait on n'est pas en mesure de savoir si une extension réellement créé la capture d'écran et même le bureau de notification n'est pas afficher dans ce cas, car la fenêtre est allé invisile après le passage à d'autres onglets et de revenir.

Est-il de toute façon à faire de cette popup modale ou une autre solution pour que les utilisateurs sont en mesure de savoir que la capture d'écran a été créé, même si elles vont à d'autres onglets et revenir à l'onglet où la prolongation a été utilisé ?

OriginalL'auteur dev02 | 2013-01-20

Si vous êtes à la recherche pour certains modal de la Fenêtre de code, vous pouvez prendre cela comme une référence et l'adapter à vos exigences.

Sortie

Cliquez Pour Agrandir L'Image

Extension Chrome boîte de dialogue modale ou une autre solution pour avertir les utilisateurs?

L'idée est d'absorber un traitement de texte imiter d'une boîte de dialogue modale.

Démonstration

manifeste.json

Ajouté une simple fenêtre modale dans le contenu du script avec un gif image.

{
    "name": "Add Model Window",
    "description": "http://stackoverflow.com/questions/14423923/chrome-extension-modal-dialog-or-other-solution-to-notify-users",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "modal.js"
            ]
        }
    ],
    "web_accessible_resources": [
        "spinner_progress.gif"
    ]
}

modal.js

Cible HTML pour être formé

L'idée est de coller un <iframe> sur la page et ajoutez une représentation de panneau pour le texte personnalisé.

<div style="position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); opacity: 0.5; z-index: 2000; height: 1083px; width: 100%;">
    <iframe style="width: 100%; height: 100%;"></iframe>
</div>
<div style="position: absolute; width: 350px; border: 1px solid rgb(51, 102, 153); padding: 10px; background-color: rgb(255, 255, 255); z-index: 2001; overflow: auto; text-align: center; top: 149px; left: 497px;">
    <div>
        <div style="text-align:center"><span><strong>Processing...  Please Wait.</strong></span>

            <br>
            <br>
            <img src="/img/spinner_progress.gif">
        </div>
    </div>
</div>

Code HTML à l'Aide de la Base de DOM Opérations.

wrapperDiv = document.createElement("div");
wrapperDiv.setAttribute("style","position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); opacity: 0.5; z-index: 2000; height: 1083px; width: 100%;");

iframeElement = document.createElement("iframe");
iframeElement.setAttribute("style","width: 100%; height: 100%;");

wrapperDiv.appendChild(iframeElement);

modalDialogParentDiv = document.createElement("div");
modalDialogParentDiv.setAttribute("style","position: absolute; width: 350px; border: 1px solid rgb(51, 102, 153); padding: 10px; background-color: rgb(255, 255, 255); z-index: 2001; overflow: auto; text-align: center; top: 149px; left: 497px;");

modalDialogSiblingDiv = document.createElement("div");

modalDialogTextDiv = document.createElement("div"); 
modalDialogTextDiv.setAttribute("style" , "text-align:center");

modalDialogTextSpan = document.createElement("span"); 
modalDialogText = document.createElement("strong"); 
modalDialogText.innerHTML = "Processing...  Please Wait.";

breakElement = document.createElement("br"); 
imageElement = document.createElement("img"); 
imageElement.src = chrome.extension.getURL("spinner_progress.gif");

modalDialogTextSpan.appendChild(modalDialogText);
modalDialogTextDiv.appendChild(modalDialogTextSpan);
modalDialogTextDiv.appendChild(breakElement);
modalDialogTextDiv.appendChild(breakElement);
modalDialogTextDiv.appendChild(imageElement);

modalDialogSiblingDiv.appendChild(modalDialogTextDiv);
modalDialogParentDiv.appendChild(modalDialogSiblingDiv);

document.body.appendChild(wrapperDiv);
document.body.appendChild(modalDialogParentDiv);

Wow Merci encore 🙂

OriginalL'auteur Sudarshan

3

Popups dans Chrome se ferme lorsque vous cliquez en dehors de la fenêtre contextuelle de la zone (enfin, pas seulement, due à une question - mais c'est de l'OT). Il n'y a pas moyen de le garder ouvert.

D'autres moyens pourraient être:
- à en informer l'utilisateur par l'intermédiaire de notification du bureau,
- ouvrir un autre onglet (une fois que l'extension a accompli son travail) avec un message de succès
- affiche une alerte
- montre un modal sur la capture d'écran de l'éditorial de la page.
- expérimentale barres d'informations
Il y a probablement d'autres moyens bien sûr, mais je suppose que ce sont les plus utilisables.

De notification du bureau, ne démontrent pas si popup devient invisible comme dans mon cas. Cela montre que, si popup est visible. Comment montrer modal par le chemin ?
Des notifications sur le bureau ne sont pas les popups, de sorte qu'ils peuvent être affichées même si le popup n'est pas visible. Votre problème est probablement que vous faire tout le travail directement de la popup donc, si votre popup se ferme, tous votre extension de la logique de l'arrêt de travail. Pour le résoudre, vous devez déplacer la logique de la popup de code à l'arrière-plan du code et à partir de là, appelez le bureau de notification une fois la screenshotting a fait. Les auxiliaires modaux peuvent être obtenus en utilisant le contenu du script sur le screenshotted page et simple en HTML+CSS+JS.
Code déplacé à l'arrière-plan de la page et même alors, si la fenêtre est invisible notification ne marche pas montrer, ne montre que lorsque la fenêtre est visible 🙁
C'est un peu difficile à résoudre sans code pour voir. Fondamentalement, une fois que vous réglez vos autorisations dans le manifeste, ce que vous avez à faire est d'appeler la capture d'écran de la fonction à l'intérieur de votre arrière-plan code (ou vous pouvez utiliser la messagerie pour obtenir le même résultat) à partir de votre popup code, qui va commencer à capturer la page active, et quand c'est fini, va appeler la fonction de rappel qui affiche les notifications de bureau.
Merci pour vos suggestions. J'ai déjà +1 vous. @Sudarshan les réponses de l'emploi. Merci à vous aussi 🙂

OriginalL'auteur Ragnarokkr

Vous devez vous connecter pour publier un commentaire.