Tabliss est une extension de page "Nouvel onglet" hautement personnalisable et open-source, compatible avec les navigateurs Firefox, Chrome et Edge. Elle permet de transformer l'interface par défaut en un espace esthétique intégrant des widgets et des fonds d'écran dynamiques. Ce guide technique détaille le processus intégral, de la récupération du code source à l'installation finale en tant qu'extension de navigateur.

Configuration de l'environnement de développement

Avant de manipuler le code source de Tabliss, assurez-vous que les outils suivants sont installés sur votre machine :

• Node.js : Version LTS recommandée.
• Gestionnaire de paquets : npm (inclus avec Node.js) ou Yarn.
• Git : Pour la gestion des sources.

Commencez par cloner le dépôt officiel et installez les dépendances nécessaires :

# Récupération des sources
git clone https://github.com/tabliss/tabliss.git
cd tabliss

# Installation des modules Node
npm i

Architecture du projet et configuration

Le projet s'appuie sur une pile technologique moderne comprenant React et TypeScript. L'organisation des fichiers suit une structure modulaire :

• webpack.config.js : Gère le regroupement des ressources pour les différentes cibles (Web, Chromium, Firefox).
• src/plugins/ : Contient la logique des composants (widgets et arrière-plans).
• src/locales/ : Gère l'internationalisation (i18n).
• .env.example : Modèle pour les clés API tierces.

Pour activer des services externes comme Unsplash (images) ou Giphy, vous devez configurer vos propres clés d'accès :

# Création du fichier de configuration locale
cp .env.example .env

Modes de développement et exécution locale

Tabliss propose plusieurs scripts de démarrage selon l'environnement visé. Ces commandes activent le rechargement à chaud (Hot Reloading) pour faciliter le débogage.

Exécution en mode Web

Idéal pour tester l'interface utilisateur directement dans un onglet classique :

npm run dev:web

Développement pour navigateurs (Extensions)

Pour tester l'intégration spécifique aux API d'extension (Chrome ou Firefox) :

# Pour Google Chrome, Brave ou Edge
npm run dev:chromium

# Pour Mozilla Firefox
npm run dev:firefox

Processus de compilation pour la production

La compilation génère une version optimisée et minifiée du code dans le dossier dist/. Chaque cible dispose de son propre sous-répertoire.

# Génération de la version Web statique
npm run build:web

# Génération pour l'écosystème Chromium
npm run build:chromium

# Génération pour l'écosystème Firefox
npm run build:firefox

Une fois la commande terminée, les fichiers prêts au déploiement se trouveront respectivement dans dist/web, dist/chromium et dist/firefox.

Installation manuelle de l'extension

Sur Chrome, Edge et navigateurs basés sur Chromium

1. Accédez à l'adresse chrome://extensions/.
2. Activez le Mode développeur (interrupteur en haut à droite).
3. Cliquez sur Charger l'extension décompressée.
4. Sélectionnez le dossier dist/chromium généré précédemment.

Sur Mozilla Firefox

1. Ouvrez la page about:debugging#/runtime/this-firefox.
2. Cliquez sur Charger un module complémentaire temporaire.
3. Sélectionnez le fichier manifest.json situé dans dist/firefox.

Système de plugins et extension des fonctionnalités

L'architecture de Tabliss repose sur une séparation stricte entre les moteurs d'arrière-plan et les widgets fonctionnels.

Types d'arrière-plans (src/plugins/backgrounds/)

• Couleurs unies : Rendu minimaliste via CSS.
• Gradients : Dégradés de couleurs paramétrables.
• API externes : Intégration directe avec Unsplash ou Giphy.

Widgets disponibles (src/plugins/widgets/)

• Horloge : Affichage de l'heure avec gestion des fuseaux horaires.
• Météo : Intégration de données météorologiques via API.
• Gestionnaire de tâches : Liste de "To-Do" persistante localement.
• Notes : Bloc-notes rapide intégré.

Tests et validation du code

Pour garantir la stabilité du projet lors de l'ajout de nouvelles fonctionnalités, Tabliss utilise Jest pour ses tests unitaires.

# Lancement de la suite de tests complète
npm test

Les fichiers de test (.test.ts) se trouvent généralement aux côtés de la logique métier, notamment pour la base de données locale (lib/db/) et les réducteurs d'état Redux des widgets.

Personnalisation avancée

Pour modifier l'apparence globale, intervenez sur les fichiers de style SASS situés dans src/styles.sass. La structure React permet égalemant de modifier les hooks personnalisés dans src/hooks/ pour changer le comportement global de l'application sans toucher aux composants visuels.