ChroDVP 2.5.0

Cette extension pour le navigateur Chrome vous propose :

  • le suivi en temps quasi réel des nouveaux messages des discussions et forums de Developpez.com ainsi que des billets de vos blogs préférés ;
  • l'ajout de boutons et raccourcis aux éditeurs du forum et chat ;
  • des liens rapides sur les éléments principaux du site et la recherche de forums, membres et Internet ;
  • et diverses autres fonctionnalités vous facilitant l'usage du forum et du chat.

Retrouvez également FireDVP, la version pour Firefox.

N'hésitez pas à commenter ou suggérer une amélioration : 32 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Menu principal

L'extension se manifeste par la présence de l'icône Image non disponible(1) en haut à droite du navigateur, et qui se déplie comme suit :

Image non disponible

Chacun des éléments avec une flèche à gauche est dépliable et vous donne accès aux éléments présentés dans les chapitres qui suivent.

La notification de nouveaux éléments est faite avec l'apparition du nombre de nouveaux éléments dans l'icône et la coloration orange des menus avec le nombre entre parenthèses :

Image non disponible

À l'exception des options, vous pouvez choisir d'afficher ou non chacun de ces boutons dans le premier onglet des options.

Si vous faites un clic droit sur l'icône Image non disponible, vous pouvez facilement accéder aux forum et site et mettre à jour l'ensemble des éléments :

Image non disponible

II. Discussions suivies

Ce sont toutes les discussions auxquelles vous êtes abonné, rassemblées au sein des différents dossiers que vous pouvez gérer dans cette page (accessible par le bouton Image non disponible) à l'exception du premier nommé « Tous » en première position qui fait la synthèse de tous les dossiers.(2)

Image non disponible

Vous pouvez ouvrir la page forum de chaque dossier en le sélectionnant dans la liste de droite et cliquant sur Image non disponible.

Vous pouvez mettre à jour manuellement l'ensemble des dossiers avec le bouton Image non disponible ou avec un clic droit sur le bouton principal, ou individuellement en sélectionnant le dossier et cliquant sur le bouton Image non disponible ou directement avec un clic droit sur le nom du dossier.

Similairement, vous pouvez ouvrir les discussions avec nouveau(x) message(s) de tous les dossiers avec le bouton Image non disponible ou d'un dossier en particulier avec Image non disponible.

Le bouton Image non disponible permet de marquer toutes les discussions du dossier sélectionné comme lues.

Quant aux boutons devant chaque discussion, ils permettent :

  • Image non disponible / Image non disponible : de vous abonner/désabonner rapidement de la discussion (voir chapitre qui suit) ;
  • Image non disponible : de modifier l'abonnement à la discussion ;
  • Image non disponible / Image non disponible : d'accéder directement au premier nouveau / dernier message de la discussion.

II-A. (Dés)Abonnement rapide

Les boutons Image non disponible / Image non disponible présents devant les discussions listées ainsi que sur le bouton principal Image non disponible lorsque vous naviguez sur une discussion ou un billet de blog DVP vous permettent de vous abonner ou désabonner de la discussion ou billet sans aucun besoin de recharger la page où vous vous situez. Après un temps de chargement, vous serez notifié que l'action a bien été effectuée.

Image non disponible

Lors de l'abonnement, vous êtes invité à sélectionner les éléments suivants tel que vous les auriez eus sur la page qui se serait chargée :

Image non disponible

puis confirmer l'action, suite à quoi, l'extension se charge du reste.

III. Forums suivis

Le panneau des forums suivis est sensiblement le même, avec la liste des forums à la place des dossiers. La seule différence notable est la présence de la liste des sous-forums directs au-dessus des discussions (un sous-forum avec nouveaux messages étant comptabilisé comme 1).

Également le bouton Image non disponible qui ouvre directement le panneau des options à l'onglet « Forums suivis » permettant de rechercher et sélectionner les forums que vous souhaitez suivre.

III-A. Définir les forums suivis

Vous avez à votre gauche la liste complète des forums avec devant chaque nom une case à cocher, et une zone de recherche permettant de descendre rapidement sur le forum de votre choix.

Image non disponible

Cette liste est, lors de la première installation, faite à partir d'une liste par défaut ; pour la mettre à jour lors de l'ajout de nouveaux forums (ou pour les étoiles rouges, avoir les forums privés), il vous suffit d'appuyer sur le bouton de mise à jour du bas.

Dès que vous cochez l'une de ces cases, le forum est recopié dans la liste de droite des forums suivis. Si vous souhaitez également lister les discussions de ses sous-forums, survolez l'élément dans la liste de droite et cochez la case « Tous » qui apparaît. Si vous ne souhaitez plus suivre un forum, cliquez sur le bouton Image non disponible associé à ce dernier ou décochez la case dans la liste de gauche. Vous pouvez dans cette liste comme celle du panneau réordonner les forums suivis comme bon vous semble par un cliquer-glisser.

IV. Blogs suivis

En plus des discussions et forums, vous avez également la possibilité de suivre les flux de n'importe quel blog. Vous restez ainsi informé en temps réel des nouveaux billets ou commentaires postés. Vous pouvez de plus choisir de « cumuler » les billets, ce qui permet de garder en mémoire les éléments là où le flux ne garde qu'un certain nombre d'éléments récents.

Image non disponible

L'extension propose par défaut le suivi cumulé du flux des blogs sur Developpez.com, vous pouvez ajouter les vôtres avec le bouton Image non disponible qui ouvre la popup suivante :

Image non disponible

Nous aurions eu par exemple pour DVP :

  • Nom : Developpez.com ;
  • Adresse du flux : https://www.developpez.net/forums/blogs/rss/ ;
  • Cumuler ? : coché.

Attention de bien rentrer l'adresse du flux et non l'adresse du blog. Vous l'obtiendrez dans la plupart des cas par un clic droit « Copier l'adresse du lien » sur une icône Image non disponible ou un lien mentionnant « RSS » présents dans la page du blog.

Vous avez la possibilité de mettre en avant (font rouge) certains éléments en effectuant un clic dessus avec la molette.

V. Notifications

Les notifications se décomposent en deux parties :

  • une barre de progression permettant de suivre le remplissage de votre boîte de réception. Si celle-ci arrive à moins de 10 %, le bouton principal passe en fond orange ;
  • les notifications de nouveaux messages privés/messages visiteurs/messages dans les rapports auxquels vous êtes abonné/requêtes d'amis/accusés de réception.
Image non disponible

VI. Marque-pages

Sur la base de cette demande de fonctionnalité, cette partie permet de retenir n'importe quelle page (ou une de ses ancres), et de lui attacher un éventuel commentaire (pouvant contenir des liens cliquables). Chaque élément a un tag différent selon sa nature (message, discussion, Q/R de FAQ, etc.). Éléments comme dossiers, vous pouvez les déplacer par un cliquer-glisser.

Contrairement aux différents éléments qui s'enfoncent au fil du temps, ceux-ci restent et permettent de cibler un message ou une page en particulier. L'idéal pour se constituer facilement une TODO et la faire évoluer.

Image non disponible

Vous pouvez, dans les options, choisir d'ajouter systématiquement les éléments en début (défaut) ou en fin de liste.

Enfin, selon la page visitée, il apparaîtra sur les boutons principaux les icônes :

  • Image non disponible / Image non disponible si vous avez marqué la page courante ;
  • Image non disponible / Image non disponible si un élément proche de cette page a été marqué (autre message d'une même discussion, autre page d'un même article, etc.) ;
  • Image non disponible / Image non disponible sinon.

Ces éléments sont mis en évidence respectivement par un fond rouge et un fond bleu et vous êtes automatiquement amené au premier élément correspondant lorsque vous ouvrez le menu.

Enfin, le bouton Image non disponible permet d'exporter dans le presse-papier les éléments du dossier courant sous la forme d'une [LIST] BBCODE du forum.

VII. Liens rapides

Vous avez à disposition une liste de liens rapides vous permettant d'accéder rapidement aux différentes pages du forum et du site :

Image non disponible

La première barre de recherche vous permet de facilement accéder à un forum à partir de son nom. Lors de votre saisie, une liste des forums correspondants s'affiche :

Image non disponible

Vous pouvez dès lors

  • cliquer sur l'icône Image non disponible pour l'ajouter à votre liste de forums favoris ;
  • cliquer sur l'icône Image non disponible pour accéder à une page de recherche listant tous les nouveaux messages ;
  • cliquer sur l'icône Image non disponible pour accéder à une page de recherche listant tous les messages ;
  • cliquer sur le reste pour aller sur la page de ce forum.

La deuxième barre de recherche vous permet d'effectuer une recherche Internet à l'aide du moteur sélectionné soit sur Internet, soit spécifiquement sur le site ou le forum.

La recherche Internet peut également être effectuée sur un forum en particulier : dès que vous saisissez des termes à rechercher, les deux boutons Image non disponible et Image non disponible se transforment en Image non disponible et Image non disponible, permettant leur recherche par message ou par discussion.

Enfin, la troisième barre de recherche vous permet de rapidement trouver un membre et accéder à son profil à partir de son pseudo.

VIII. Chat : ouverture/conservation des discussions

Relatif au chat Developpez.com, le bouton principal permet :

  • lorsque vous êtes sur n'importe quelle page, d'ouvrir un nouvel onglet à l'adresse du chat ;
  • si vous êtes connecté, de conserver dans un fichier .html local toutes vos conversations en sélectionnant les onglets que vous souhaitez sauver. Chaque fichier sauvé aura par défaut le nom yyyymmdd.html et sera obtenu comme lorsque vous téléchargez un fichier.

IX. Ouverture des nouveaux

Selon la page où vous vous trouvez, il permet des choses distinctes :

  • dans le tableau de bord, forum ou une page de recherche : il ouvre toutes les discussions non lues ainsi que les éventuels sous-forums qui en possèdent (si ces sous-forums ont eux-mêmes des « nouveaux » sous-forums, c'est une page de recherche qui s'ouvre pour avoir directement leurs nouvelles discussions et ce même bouton pourra les ouvrir en un clic) ;
  • dans une page de cours ou FAQ : il déplie entièrement les sections ;
  • dans les pages du bugtracker : il ouvre les rapports non lus.

Cette fonctionnalité est également disponible avec le raccourci Alt+O.

X. Options

Les options se décomposent en quatre onglets :

  • les « Éléments suivis » permettant de sélectionner les boutons du menu principal à afficher et fixer les différents délais de mises à jour automatiques (l'image présente les paramètres par défaut), ainsi que le moyen d'ouverture des pages sur un clic gauche (le clic droit faisant automatiquement l'inverse de ce qui est sélectionné) ;

    Image non disponible
  • les « Forums suivis » que nous avons déjà vus chapitre III-ADéfinir les forums suivis ;
  • les « Suppléments » permettant l'activation ou non des éléments présentés dans le chapitre suivant. (Hormis le CSS personnalisé, ils sont tous activés par défaut.)

    Image non disponible
  • « Extension » qui donne les liens utiles.

XI. Suppléments

XI-A. Forum/Chat : ajout des boutons et raccourcis aux éditeurs

Pour faciliter l'écriture des messages, ainsi que satisfaire la demande souvent faite des boutons manquants sur l'éditeur, l'extension ajoute les neuf boutons suivants :

Image non disponible

Avec :

  • Image non disponible pour ajouter les balises [C] (code dit « inline » au sein d'un paragraphe), aussi disponible avec le raccourci ALT+I ;
  • Image non disponible pour ajouter les balises [LATEX] (formule LaTeX), aussi disponible avec le raccourci ALT+L ;
  • Image non disponible pour ajouter les balises [PRE] (cadre respectant l'indentation), aussi disponible avec le raccourci ALT+P ;
  • Image non disponible pour ajouter les balises [SPOILER] (permet de montrer/cacher une partie du message), aussi disponible avec le raccourci CTRL+SHIFT+S ;
  • Image non disponible pour ajouter les mêmes zones avec ces images que vous pouvez croiser dans les cours et FAQ ;
  • Image non disponible pour ajouter le modèle d'actualité de LittleWhite.

Ainsi que les raccourcis suivants :

  • sur le forum :

    Raccourci Balise correspondante Description
    ALT+C CODE Insertion de code
    ALT+Q QUOTE Citation d'un texte
    CTRL+ALT+L URL Ajout d'un lien (si vous avez un lien dans le presse-papier, il est inséré automatiquement)
    CTRL+ALT+R * COLOR (rouge) Texte de couleur rouge
    ALT+V COLOR (vert) Texte de couleur verte
    ALT+B COLOR (bleu) Texte de couleur bleue
    CTRL+ALT+S * S Texte barré
    CTRL+ALT+I IMG Insertion d'une image par son URL
    CTRL+BAS SUB Texte en indice
    CTRL+HAUT SUP Texte en exposant
    ALT+N NOPARSE Texte non interprété
    ALT+DROITE INDENT Décalage à droite du texte
    CTRL+ALT+H HIGHLIGHT Texte mis en évidence
    CTRL+ALT+P POST Ajout d'un lien vers un message (si vous avez le lien entier ou juste l'identifiant dans le presse-papier, il est automatiquement inséré)
    ALT+T THREAD Ajout d'un lien vers une discussion (si vous avez le lien entier ou juste l'identifiant dans le presse-papier, il est automatiquement inséré)
    ALT+E [nbsp][/nbsp] Espace insécable (les vraies étant remplacées par des étoiles, il a été mis en place ces balises)
    ALT+G «[nbsp][/nbsp]…[nbsp][/nbsp]» Insertion de guillemets
    ALT+L - La formule sélectionnée dans l'éditeur ou contenue dans le presse-papier est modifiée pour être affichée sous forme d'image par le biais du site codecogs.com.
  • sur le chat :

    Raccourci Balise correspondante Description
    CTRL+B B Texte en gras
    CTRL+U U Texte souligné
    CTRL+I I Texte en italique
    CTRL+ALT+L URL Ajout d'un lien (si vous avez un lien dans le presse-papier, il est inséré automatiquement)
    ALT+C CODE Insertion de code
    ALT+Q QUOTE Citation d'un texte
    CTRL+ALT+R * COLOR (rouge) Texte de couleur rouge
    ALT+V COLOR (vert) Texte de couleur verte
    ALT+B COLOR (bleu) Texte de couleur bleue
    ALT+K COLOR (noir) Texte de couleur noire
    CTRL+ALT+S * S Texte barré
    CTRL+SHIFT+S * SMALL Texte rétréci
    ALT+G « … » Insertion de guillemets
    ALT+L - La formule sélectionnée dans l'éditeur ou copiée dans le presse-papier est modifiée pour être affichée sous forme d'image par le biais du site codecogs.com.

(*) Diffèrent de FireDVP : ALT+S et ALT+R provoquent un rechargement de la page sous Chrome.

Tous ces raccourcis fonctionnent si vous avez du texte sélectionné ou non et le cas échéant, insèrent les balises autour.

Et dans le mode standard où la touche tabulation ne permet pas de basculer sur les boutons, vous pouvez à tout moment :

  • valider votre message/MP/rapport/billet avec CTRL+Entrée ;
  • le prévisualiser avec ALT+Entrée.

XI-B. Forum : quota des MP

Depuis le nouveau forum, il n'y a plus la notification lorsque l'on descend en dessous des 10 % de quota et la barre de progression située en bas de la page n'est pas forcément immédiatement visible dans la boîte de réception… ce qui entraîne quelques « surprises ». C'est pourquoi en plus de la présence de la barre de progression dans le panneau des notifications, l'extension remonte automatiquement cette barre au début de la page.

XI-C. Forum : rétrécissement des images en pièces jointes

Depuis le nouveau forum, les images en pièces jointes ont leur taille d'origine et lorsque celles-ci sont géantes et qu'il y en a plusieurs, la lecture et navigation des messages devient fastidieuse. L'extension propose alors de les rétrécir automatiquement tout en les mettant en lien cliquable (réglable dans l'onglet « Suppléments sur le forum » des options).

XI-D. Forum : CSS personnalisé

Je propose un CSS personnalisé qui colore les différents éléments des pages du forum sur un thème bleuté, mettant entre autres en avant les liens dans les messages et corrigeant quelques artefacts visuels.

XI-E. Forum : répondre à tous

Lorsque vous visualisez un message privé qui a été envoyé à plusieurs personnes, un bouton « Répondre à tous » s'ajoute pour recopier cette même liste dans les destinataires de votre message.

XI-F. Forum : sauvegarde des MP au format HTML

Lorsque vous êtes dans votre boîte de réception, de messages envoyés ou tout autre dossier similaire, cochez les messages que vous souhaitez garder et dans le menu du bas, cliquez sur le bouton « Télécharger au format HTML » :

Image non disponible

Après un temps de chargement, vous obtiendrez le fichier .html comme lorsque vous téléchargez un fichier.

XI-G. Chat : sélection rapide de code

Pour faciliter la copie de code ou citation dans les nouveaux onglets ouverts par le chat, un lien cliquable est ajouté au début des pages et permet, comme sur le forum, de sélectionner l'ensemble.

XI-H. Chat : ajout d'un thème nuit et de sons

Récemment demandé dans ce billet, vous pouvez dorénavant être averti par un son sur :

  • les messages privés ;
  • les messages personnels dans le salon ;
  • l'arrivée d'un membre ;
  • la sortie d'un membre ;
  • tout autre message du salon,

et avez en plus la possibilité d'inverser les couleurs du chat, tout cela grâce aux deux boutons :

Image non disponible

XI-I. Chat : ajout de langages

Je travaille depuis un certain temps à l'ajout de la coloration syntaxique sur le forum, mais forum comme chat cela tarde à être mis en place. C'est ainsi que je prends les devants sur le chat en modifiant la boîte de dialogue pour permettre la coloration syntaxique de tous ces langages :

Image non disponible

Pour ceux qui ne souhaitent pas utiliser l'extension, vous pouvez utiliser cette page.

XI-J. Copie rapide de liens

Sur le forum, il n'est pas rare de devoir diriger un membre vers un sujet de FAQ particulier ou tout autre lien, il s'ensuit alors deux copies du titre puis de l'adresse pour créer le lien dans votre message.

L'extension ajoute un élément dans le menu contextuel des pages et liens vous permettant de copier directement dans le presse-papier la balise [URL] correspondante.

XII. Téléchargement

Vous trouverez l'extension à installer sur le Chrome Web Store : ChroDVP.

Un bogue, une amélioration, n'hésitez pas à m'en faire part par MP ou dans la discussion associée.

Bonne utilisation ! Image non disponible

Version actuelle 2.5.0

  • Blogs : nouvelle possibilité de mettre en avant des éléments par clic molette (merci Malick).
  • Log chat : amélioration du CSS.
  • Log MP : ajout du champ BBCode.
  • Forum : amélioration du balisage des éléments URL et IMG des raccourcis clavier.
  • Chat : rétablissement du thème de nuit et des sons (le fichier en ligne ne sera pas utilisable tant que le domaine ne sera pas passé en HTTPS).
  • Chat : rétablissement des langages supplémentaires (idem).
  • Chat : ajout d'un bouton permettant d'ajouter facilement des formules LaTeX.
  • Ajout d'un élément « Copier la balise [URL] dans le presse-papier » au menu contextuel(3) des liens et pages afin de faciliter leur copie.
  • Ajout automatique de liens aux différents titres de chapitres et codes des tutoriels dans ce même but.
  • Interface : amélioration du visuel des longs titres.
  • Interface : alerte sonore hors focus de la fenêtre sur les nouveaux messages (désactivé par défaut).
  • Interface : correction bogue sur la sélection du moteur de recherche.
  • Interface : ajout des moteurs de recherche Lilo et Ecosia.
  • Interface : rechargement de tous les éléments + liens vers les forum et site disponibles au clic droit de l'icône de la popup.
  • Correction bogue sur l'icône au chargement.
  • Mise à jour de la liste des forums.

XIII. Remerciements

Je remercie chaleureusement ClaudeLELOUP pour sa relecture orthographique et Sehnsucht pour son aide au développement des nouvelles fonctionnalités du chat !

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

En complément sur Developpez.com


Si malgré l'installation de l'extension celle-ci n'apparaît pas, veillez à réduire la largeur de la barre d'adresse.
Dans ce panneau, les discussions importantes ne sont pas mises en évidence, il n'y a aucune distinction faite sur le forum dans les pages des dossiers d'abonnement. Ce problème a déjà été remonté il y a un moment, sans succès jusque-là.
Menu qui s'affiche au clic droit.

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2016 Winjerome. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.