Création d'une extension chromée pour Diigo, partie 2

head>

Rafraîchissement

// popup.js
var bg = chrome.extension.getBackgroundPage();

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('refreshButton').addEventListener('click', function() {
        bg.doRequest();
    });
});

/* popup.css */
#refreshButton {
    margin: 10px;
}

Le code JS ici fait ce qui suit: Nous récupérons d'abord l'objet de fenêtre de la page AutoGenerated du script de fond.js. Les scripts contextuels ont un accès direct au code de la page d'arrière-plan, par opposition aux scripts de contenu qui doivent transmettre des messages. Ensuite, nous lions un gestionnaire de clics à l'événement de clic du bouton de rafraîchissement qui appelle notre méthode Dorequest à partir de fond.js.

Si vous rechargez l'extension maintenant et gardez la page d'arrière-plan générée ouverte, vous devriez voir des sorties répétées des signets récupérés lorsque vous cliquez sur le bouton Actualiser.

Nous pouvons maintenant continuer à coder en arrière-plan.js.

Traitement du tableau de réponse

Nous trouvons toutes les balises en itérant à travers tous les signets récupérés, en les stockant dans un tableau, puis en supprimant les doublons. Pendant que nous itérons, nous pouvons vérifier tous les signets contenant la balise «BBS-ROOT» et en faire une note dans une variable distincte. Ajoutons une fonction de processus:

var process = function(response) {
    var iLength = response.length;
    if (iLength) {
        console.info(iLength + " bookmarks were found.");
    } else {
        console.info("Response is empty - there are no bookmarks?");
    }
};

Aussi, dans la fonction Dorequest, remplacez

var response = JSON.parse(xml.responseText);
console.log(response);

avec Process (JSON.Parse (xml.ResponSeText));.

Le rechargement de l'extension imprimera le nombre de signets trouvés pour l'utilisateur sélectionné. Incluons une fonction d'assistance pour nous aider à filtrer les balises en double du tableau des balises. Cette fonction étend le tableau JavaScript natif, vous pouvez donc l'appeler comme s'il avait été construit tout au long. Mettez-le sous la partie Base64, près du haut du fichier:

/**
 * Removes duplicate elements from the array
 */
Array.prototype.unique = function () {
    var result = [];
    var len = this.length;
    while (len--) {
        if (result.indexOf(this[len]) == -1) {
            result.push(this[len]);
        }
    }
    this.length = 0;
    len = result.length;
    while (len--) {
        this.push(result[len]);
    }
};

Maintenant, construisons la fonction de processus.

var process = function(response) {
    var iLength = response.length;
    var allTags = [];
    var rootBookmarks = [];
    if (iLength) {
        console.info(iLength + " bookmarks were found.");
        var i = iLength;
        while (i--) {
            var item = response[i];
            if (item.tags !== undefined && item.tags != "") {
                var tags = item.tags.split(',');
                if (tags.indexOf('bbs-root') > -1) {
                    rootBookmarks.push(item);
                }
                allTags = allTags.concat(tags);
            }
        }
        allTags.unique();
        allTags.sort();
        console.log(allTags);
    } else {
        console.info("Response is empty - there are no bookmarks?");
    }
};

Nous itons à travers tous les signets, le cas échéant, et pour chacun, nous transformons leur propriété «Tags» en tableau. Ce tableau est ensuite fusionné avec le tableau AllTags sur lequel nous appelons UNIQUE () pour supprimer les doublons et triés par ordre alphabétique. Dans le processus, nous surveillons également les signets bbs-root et coprions leurs références au tableau RootBookmarks.

Nous sommes maintenant prêts à manipuler la barre des signets.

Books Barks

Tout d'abord, nous devons vérifier si "Diigo #bbs" existe en tant que dossier dans la barre des signets. Sinon, nous le créons. Mettez le code suivant immédiatement sous Alltags.sort () ;:

var folderName = 'Diigo #BBS';
        chrome.bookmarks.getChildren("1", function(children) {
            var numChildren = children.length;
            var folderId;
            while (numChildren--) {
                if (children[numChildren].title == folderName) {
                    folderId = children[numChildren].id;
                    break;
                }
            }
            if (folderId === undefined) {
                chrome.bookmarks.create({
                    parentId: "1",
                    title: folderName
                }, function(folder) {
                    folderId = folder.id;
                    console.log(folderName + " not found and has been created at ID " + folder.id);
                });
            }

        });

Nous obtenons d'abord les enfants du nœud avec l'ID 1, qui est la barre des signets (vous pouvez le voir en utilisant GetTree). Nous les itérons ensuite et comparons leurs titres au nom souhaité de notre dossier. Si le dossier est trouvé, nous enregistrons son ID et quittons la boucle. S'il n'est jamais trouvé, nous le créons et enregistrons l'ID.

Maintenant, nous devons savoir si notre dossier contient le dossier «Tags». Une fois que nous avons fait cela, nous devrons savoir si notre dossier «Tags» contient un sous-dossier correspondant au nom de chaque balise que nous avons trouvé. Vous remarquez un modèle ici? On dirait que nous aurons besoin d'une fonction commune pour vérifier si un dossier de signets contient un autre dossier. Nous pourrions aussi bien créer une autre méthode d'assistance pour vérifier également les signets réels. Ajoutons les fonctions suivantes à notre fichier background.js (au-dessus de la fonction de processus, par exemple):

// popup.js
var bg = chrome.extension.getBackgroundPage();

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('refreshButton').addEventListener('click', function() {
        bg.doRequest();
    });
});

Ces fonctions sont presque identiques, bien que chacune compare sa propre propriété à la valeur fournie. Nous en utiliserons un pour les dossiers et l'autre pour les signets. Ces méthodes sont asynchrones, tout comme le reste de l'espace de noms Chrome.

Vous pouvez également les fusionner en une seule méthode et utiliser un troisième paramètre qui indique la méthode quelle propriété que nous recherchons (titre ou URL), respectant ainsi un peu plus le principe sec. Je vais vous laisser cela pour le moment et y revenir dans un article de suivi qui se concentrera sur les optimisations.

Réécrivons notre méthode de processus pour l'utiliser maintenant.

/* popup.css */
#refreshButton {
    margin: 10px;
}

beaucoup plus concis, n'est-ce pas? Lorsque nous considérons d'autres étapes, il est clair que nous devons faire la différence entre une liste des balises existantes et la liste des balises que nous avons fraîchement récupérées sur le serveur. À cette fin, nous ajouterons deux nouvelles méthodes d'assistance à l'objet Native JavaScript Array: Intersect et Diff. Mettons-les en haut du fichier, juste où se trouve Array.Unique (), et même si nous y sommes, déplacez les méthodes GetFirstChildBytitle et GetFirstChildByurl là-haut.

var process = function(response) {
    var iLength = response.length;
    if (iLength) {
        console.info(iLength + " bookmarks were found.");
    } else {
        console.info("Response is empty - there are no bookmarks?");
    }
};

Enfin, ajoutons une méthode d'assistance pour la journalisation de la console au même endroit en haut de l'arrière-plan.js fichier:

var response = JSON.parse(xml.responseText);
console.log(response);

Vous pouvez désormais remplacer tous vos appels console.log () dans le code par un sabot. Lorsque vous devez désactiver la journalisation, basculez simplement la constante de console_logging en false et toutes les sorties s'arrêtent. C'est génial lors du passage du développement à la production - il introduit une très petite surcharge, mais réduit le temps de préparation en ce que vous n'avez pas besoin de traquer manuellement et de commenter ou de supprimer toutes les sorties de votre console.

Conclusion de la partie 2

Dans cette partie, nous avons construit plusieurs fonctions d'assistance essentielles pour des travaux supplémentaires et ajouté une logique de gestion des erreurs de base. Dans le prochain épisode de cette série, nous construisons le corps de l'extension. Restez à l'écoute!

Questions fréquemment posées (FAQ) sur la création d'une extension chromée avec Diigo

Comment installer l'extension Diigo Chrome?

Pour installer l'extension Diigo Chrome, ouvrez d'abord votre navigateur Google Chrome. Ensuite, accédez à la boutique en ligne Chrome et recherchez «Diigo Web Collector». Cliquez sur le bouton «Ajouter au Chrome» à côté de l'extension. Une fenêtre contextuelle apparaîtra pour demander une confirmation. Cliquez sur «Ajouter une extension» pour terminer l'installation. Une fois installé, l'icône Diigo apparaîtra dans la barre d'outils de votre navigateur.

Quelles fonctionnalités l'extension Diigo Chrome offrent-elles?

L'extension Diigo Chrome offre une variété de fonctionnalités pour améliorer votre expérience de navigation. Ceux-ci incluent la possibilité de mettre en évidence le texte sur les pages Web, d'ajouter des notes collantes, d'enregistrer des pages pour la lecture hors ligne et de mettre en signet les pages pour un accès facile plus tard. Vous pouvez également organiser vos signets en listes ou balises, et les partager avec d'autres.

Comment utiliser l'extension Diigo Chrome pour mettre en surbrillance le texte?

Pour mettre en surbrillance le texte à l'aide de l'extension Diigo Chrome,, Tout d'abord, sélectionnez le texte que vous souhaitez mettre en surbrillance. Ensuite, cliquez avec le bouton droit et choisissez «Diigo: surlignez» dans le menu contextuel. Le texte sélectionné sera mis en évidence en jaune. Vous pouvez également modifier la couleur de surbrillance en cliquant sur l'icône Diigo dans votre barre d'outils et en sélectionnant 'Highlight'> 'Color'.

Comment ajouter une note collante à l'aide de l'extension Diigo Chrome?

Pour ajouter une note collante, d'abord, sélectionnez le texte où vous souhaitez ajouter la note. Cliquez avec le bouton droit et choisissez «Diigo: Ajoutez une note collante». Une fenêtre contextuelle apparaîtra où vous pourrez taper votre note. Cliquez sur «publier» pour enregistrer la note. La note apparaîtra comme une petite icône à côté du texte sélectionné. Souvrez sur l'icône pour afficher la note.

Comment puis-je enregistrer une page pour la lecture hors ligne à l'aide de l'extension Diigo Chrome?

Pour enregistrer une page pour la lecture hors ligne, cliquez sur l'icône Diigo dans Votre barre d'outils et sélectionnez «Lire plus tard». La page sera enregistrée dans votre bibliothèque Diigo et peut être accessible même lorsque vous êtes hors ligne.

Comment puis-je mettre en signet une page à l'aide de l'extension Diigo Chrome?

Pour mettre en signet une page, cliquez sur Sur l'icône Diigo dans votre barre d'outils et sélectionnez «Bookmark». Une fenêtre contextuelle apparaîtra où vous pouvez ajouter une description, des balises et choisir une liste pour ajouter le signet. Cliquez sur «Enregistrer» pour enregistrer le signet.

Comment organiser mes signets à l'aide de l'extension Diigo Chrome?

Vous pouvez organiser vos signets en listes ou balises. Pour ajouter un signet à une liste, cliquez sur l'icône Diigo dans votre barre d'outils et sélectionnez «Bookmark». Dans la fenêtre contextuelle, choisissez une liste dans le menu déroulant «Ajouter à la liste». Pour ajouter une balise, tapez la balise dans le champ «Tags».

Comment partager mes signets à l'aide de l'extension Diigo Chrome?

Pour partager un signet, cliquez sur l'icône Diigo dans votre barre d'outils et sélectionnez «Bookmark». Dans la fenêtre contextuelle, cliquez sur l'onglet «Partager». Vous pouvez choisir de partager le signet par e-mail, ou copier le lien pour le partager par d'autres moyens.

Comment créer une touche à la base pour ouvrir Diigo dans Chrome?

Pour créer une cure-lodage, Accédez à «chrome: // extensions / raccourcis» dans votre navigateur Chrome. Trouvez l'extension Diigo et cliquez sur le lien «Raccourcis clavier». Dans la fenêtre pop-up, vous pouvez définir une touche de piste pour ouvrir Diigo.

Comment mettre à jour l'extension Diigo Chrome?

Pour mettre à jour l'extension Diigo Chrome, naviguer vers 'Chrome: / / Extensions 'dans votre navigateur Chrome. Activez le «mode développeur» en cliquant sur le commutateur à bascule en haut à droite. Ensuite, cliquez sur le bouton «Mettre à jour». Si une mise à jour est disponible, elle sera téléchargée et installée automatiquement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!