27 points par kangbit 2025-09-14 | 13 commentaires | Partager sur WhatsApp

Présentation

Voici une collection d’outils créée à partir de la fonctionnalité Picture-in-Picture du navigateur.

Pourquoi l’avoir créé ?

J’utilise parfois un sélecteur de couleurs, mais je n’avais pas envie d’installer une application dédiée. Dans le cas des sélecteurs de couleurs disponibles sur le web, il fallait parfois déplacer la fenêtre du navigateur (ou l’onglet), ce qui n’était pas très pratique.

Quelles fonctionnalités sont disponibles ?

Horloge : affichage de l’heure actuelle
Minuteur : minuteur à compte à rebours
Sélecteur de couleurs : extraction et copie du code couleur
Redimensionnement d’image : ajustement de la taille des images
Traducteur : traduction multilingue ( avec l’API de traduction de Chrome )
Mémo : notes textuelles simples
Roulette : jeu de sélection aléatoire

Quelles fonctionnalités prévoyez-vous d’ajouter ensuite ?

Je prévois d’ajouter une calculatrice, un convertisseur d’unités, un scripter, un filigrane d’image, etc.
S’il y a d’autres outils dont vous avez besoin, n’hésitez pas à envoyer vos suggestions via le contact en bas à gauche. Je ferai de mon mieux pour les intégrer activement.

Stack technique

Next.js
React
TypeScript
react-document-pip

13 commentaires

 
kaistj 2025-09-16

Oh oh~ ! C’est une bonne idée.

 
rainystar 2025-09-15

Il faut d’abord y accéder via le navigateur, donc. Je me dis que ce serait bien si on pouvait l’afficher en permanence. Même maintenant, c’est déjà vraiment super. J’aime particulièrement le minuteur et le sélecteur de couleurs. ^^

 
kangbit 2025-09-15

Merci. De mon côté aussi, l’outil auquel je tiens le plus, c’est l’extracteur de couleurs !

 
tribela 2025-09-15

J’utilise Firefox, et j’ai un message indiquant que le PiP n’est pas pris en charge. Pourtant, j’utilisais bien la fonction PiP quand je regardais YouTube.

 
kangbit 2025-09-15

Nous utilisons une API du navigateur appelée Document Picture-in-Picture, différente du PIP pour les images et les vidéos.
Comme il s’agit encore d’une fonctionnalité expérimentale, elle ne fonctionne pas encore sur certains navigateurs T_T
Vous pouvez vérifier les navigateurs compatibles sur https://caniuse.com/mdn-api_documentpictureinpicture !

 
huiya 2025-09-15

Waouh, c'est génial.

 
kangbit 2025-09-15

Merci !

 
skageektp 2025-09-15

Oh, énorme;;; je ne savais pas du tout que le PiP ne servait pas seulement à regarder des vidéos, mais permettait aussi toutes sortes d’interactions !

 
kangbit 2025-09-15

Comme c’est encore une fonctionnalité expérimentale, beaucoup de gens ne la connaissent pas encore !
https://developer.mozilla.org/en-US/docs/…

 
gjen6s 2025-09-14

Les mémos aussi sont très bien ! Merci

 
kangbit 2025-09-15

Merci !
N'hésitez pas à laisser un commentaire si vous avez besoin d'autres outils !

 
eajrezz 2025-09-14

Waouh, l’idée est excellente !

 
kangbit 2025-09-15

Merci~ !