Onglets de développement dans Chrome avec OffiDocs

DESCRIPTION

Dev Tabs est une page « Nouvel onglet » et votre page de destination pour Chrome.

Cette extension a été créée principalement pour les développeurs, les ingénieurs logiciels et similaires.

Pendant très longtemps, j'ai cherché un nouvel onglet de remplacement et n'en ai trouvé que ceux qui étaient génériques, non adaptés au travail de développement, remplis de publicités, qui me suivaient à chaque instant ou qui n'étaient tout simplement pas mon style.

J'ai donc créé des Dev Tabs.

J'ai intégré un espace pour les sites régulièrement visités, les actualités de l'industrie du développement, les conditions météorologiques actuelles, GitHub, et j'ai même mis un petit générateur de code QR dans l'extension.

C’est rapidement devenu un outil important sur lequel je compte.

SIGNETS : en commençant sur le côté gauche de la page, j'ai mis une colonne de « Signets ».

Ce sont les sites que j’utilise régulièrement.

Au quotidien, il existe de nombreux sites que je visite tout au long de la journée pour le travail et le plaisir.

Client de messagerie, GitHub, différents sites Web de documentation, tutoriels et bien plus encore.

Au lieu de parcourir toutes les pages.

Vous pouvez en ajouter autant que vous le souhaitez et la colonne défilera indépendamment.

Ceux-ci n'ont rien à voir avec les signets intégrés et sont saisis séparément.

Lorsque vous visitez la page pour la première fois, cliquez sur le rouage des paramètres au milieu de la page et plusieurs sélections différentes vous seront proposées.

Si vous cliquez sur le paramètre « Favoris », une zone de saisie s'affichera.

C'est ici que vous saisirez le groupe initial de sites que vous souhaitez afficher dans la colonne « favoris ».

En utilisant le format markdown, [Nom du site](https://nameOfWebsite.

com), [Nom du site](https://nameOfWebsite.

com), en séparant chaque entrée par une virgule, entrez tous les sites que vous souhaitez répertorier sur la page.

Lorsque vous avez terminé et revenez à la page, ils seront tous répertoriés.

De plus, au milieu de la page, sous l'engrenage des paramètres, il y a un «+» pour ajouter des «signets» uniques, car vous pouvez rencontrer quelque chose que vous souhaitez ajouter au fur et à mesure sans avoir à ressaisir tous les autres.

Si vous cliquez sur le «+», une entrée apparaîtra dans laquelle vous pourrez saisir le nom et l'URL du site.

Une fois que vous avez cliqué sur Enregistrer, cette entrée sera ajoutée à la fin de la liste.

NEWS : j'ai utilisé Dev.

à l'API des articles pour intégrer les nouveautés de l'industrie.

Cela remplira automatiquement une colonne avec les articles du jour du développeur.

à la première page.

S'il y a une image accompagnant l'article, elle sera affichée et en dessous se trouvera le titre de l'article qui est également une URL cliquable pour vous amener directement à l'article sélectionné.

Non seulement j'ai trouvé de nombreux articles intéressants sur Dev.

à, j'ai également trouvé d'innombrables « comment faire » utiles, et j'y contribue également de temps en temps, c'est pourquoi je les ai utilisés pour afficher les actualités de l'industrie.

GITHUB : l'intégration de GitHub était une évidence.

J'utilise leurs services tous les jours, plusieurs fois par jour.

Lorsque je faisais les 100 jours de code, je m'assurais de commettre quelque chose chaque jour pour suivre mes progrès.

Pour cette raison, j'ai le graphique des contributions GitHub au centre de la page.

Lorsque vous visitez la page pour la première fois, accédez aux paramètres et sélectionnez l'option « Calendrier GitHub ».

Remplissez votre nom d'utilisateur GitHub et lorsque vous revenez à la page principale, cela remplira le graphique.

Comme j'utilise beaucoup GitHub, j'ai également intégré une liste de dépôts GitHub.

Cette partie de la page affichera vos 10 meilleurs dépôts.

La configuration est le même processus, en sélectionnant « GitHub Feed » et en remplissant à nouveau votre nom d'utilisateur.

J'ai laissé cela comme deux paramètres distincts car j'ai personnellement plusieurs comptes GitHub et j'ai pensé que quelqu'un voudrait peut-être afficher le graphique d'un nom d'utilisateur et les dépôts d'un nom d'utilisateur différent.

Vous pouvez également simplement saisir le même nom d'utilisateur pour les deux paramètres et afficher le graphique et la liste des 10 meilleurs du même compte.

Le graphique est juste à titre d'affichage mais la liste des dépôts est une liste cliquable.

Si vous cliquez sur le nom du dépôt, cela vous amènera directement à la page sélectionnée.

METEO : Au centre de la page, j'ai affiché vos conditions météorologiques actuelles.

Accédez à la page des paramètres, sélectionnez l'option « Météo » et cliquez sur le bouton pour vous localiser.

J'ai utilisé l'API HTML Geo-localisation pour acquérir vos coordonnées lorsque vous cliquez sur le bouton.

Au premier clic, il vous demandera la permission de vous localiser.

Une fois que vous avez cliqué sur « ok », vos coordonnées seront récupérées et stockées dans le stockage local de Chrome.

Toutes les informations collectées par cette extension sont stockées dans le stockage local de Chrome sur votre ordinateur.

Aucune information n’est collectée et envoyée nulle part.

Tout reste avec vous.

Cela étant dit, si vous déménagez et souhaitez que votre affichage météo soit mis à jour, vous devrez revenir aux paramètres et cliquer à nouveau sur le bouton pour obtenir vos nouvelles coordonnées, qui écraseront celles précédemment stockées.

Il affichera alors la météo correcte.

HEURE ET DATE : L'heure et la date ne sont qu'une horloge ordinaire écrite en JavaScript.

Obtenir l'heure et la date actuelles et les afficher simplement au centre de la page.

TWITTER : Dév.

to possède sa propre extension Chrome pour afficher un fil d'actualité mis à jour ou une liste d'articles à côté de votre fil Twitter lorsque vous visitez le site Web Twitter.

J'ai continué et j'ai emprunté les parties importantes de cette extension et je les ai incluses ici.

Ainsi, lorsque vous visitez Twitter, sur le côté gauche de votre flux se trouve une petite liste non intrusive des meilleurs articles sur le développement.

pour le moment.

La liste est interactive et je l'ai trouvée utile pour trouver des personnes intelligentes à suivre dans l'industrie.

Vous pouvez trouver leur extension sur leur page GitHub à l'adresse : https://github.

com/thepracticaldev.

GÉNÉRATEUR DE CODE QR : L'une des dernières choses que j'ai décidé de mettre dans cette extension en ce moment est un petit générateur de code QR.

Je travaille actuellement à distance et plusieurs fois dans la journée, je dois me lever de mon poste de travail et faire autre chose.

Tous les jours à 2h15, je dois récupérer les enfants à l'école.

Je dois faire la queue pendant 30 minutes avec la voiture éteinte.

Si je suis en train de lire comment faire quelque chose, je peux maintenant copier l'URL du site sur lequel je me trouve, la coller dans le générateur de code QR, obtenir un code QR, puis le scanner avec mon téléphone.

Maintenant, pendant que j'attends en ligne, je peux finir de lire ou de faire ce que je faisais.

C'était la motivation de la fonctionnalité QR.

Pour l'utiliser, cliquez simplement sur l'icône de cette extension et une petite boîte apparaîtra.

Dans la boîte se trouveront quelques informations simples sur l’extension et en bas, vous verrez l’entrée.

Collez simplement l'URL ou autre et cliquez pour générer le code QR.

Scannez-le avec votre téléphone et c'est parti.

SUIVI ET INFORMATIONS PERSONNELLES : Comme je l'ai dit au début, je recherchais une extension adaptée au travail que je fais et sans publicité ni suivi.

Comme je n'en ai pas trouvé, j'ai décidé d'en fabriquer un.

Cela étant dit.

.

.

Cette extension ne vous suit pas et n'obtient aucun type d'informations personnellement identifiables.

Il ne contient AUCUNE publicité ou quoi que ce soit du genre.

J'ai même laissé Google Analytics.

Toutes les informations nécessaires à cette fonctionnalité d'extensions sont stockées sur VOTRE ordinateur dans le stockage local de Chrome.

Je précise cela car, en tant que développeur, je suis sûr que vous le savez, il existe deux emplacements de « stockage local » différents.

L'un pour l'API HTML et l'autre pour l'API Chrome.

J'ai découvert cela lors du développement de cette extension et j'avais en fait besoin d'une extension spéciale pour examiner le stockage local Chrome.

Le simple fait de faire un « inspecter l'élément » ne vous permettra pas de le voir.

J'ai utilisé une extension appelée : Storage Area Explorer - https://github.

com/jusio/storage-area-explorer.

Cela m'a permis de voir le stockage local de Chrome.

Si vous êtes curieux.

SUPPORT : Veuillez m'envoyer un e-mail à : info@mattaz.

com Site Internet : https://mattaz.

com Les informations, les mises à niveau et les développements ultérieurs peuvent être suivis sur : https://mattaz.

com/devtabs/Code : https://github.

com/Cipher-Coder/chromeExtension

Informations supplémentaires:

- Offert par mattaz.com
- Note moyenne : 5 étoiles (j'ai adoré)
- Développeur cette adresse e-mail qui est protégée du spam. Vous devez activer JavaScript pour la voir.

Web des onglets de développement extension intégré avec les OffiDocs Chromium en ligne