Merge d33dc43 into 802955d

Author: sarod

.github/workflows/browser-extension.yaml

@@ -36,6 +36,53 @@ jobs:
       - name: Test
         run: pnpm test
 
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: browser-extension
+    steps:
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v4
+        with:
+          package_json_file: "browser-extension/package.json"
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: "browser-extension/package.json"
+          cache-dependency-path: "browser-extension/pnpm-lock.yaml"
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build extension zip
+        run: pnpm zip
+
+      - uses: actions/upload-artifact@v4
+        id: upload-bth-extension-artifact
+        if: false
+        with:
+          if-no-files-found: error
+          name: bth-extension.zip
+          path: ${{github.workspace}}/browser-extension/.output/
+          retention-days: 30
+
+      - name: Comment PR with extension artifacts link
+        if: github.event_name == 'pull_request' && steps.upload-bth-extension-artifact.outcome == 'success'
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          message: |
+            Extension build artifacts: <${{ steps.upload-bth-extension-artifact.outputs.artifact-url }}>
+          comment-tag: extension-artifacts
+
+      - name: Update assets on extension-latest release
+        uses: "marvinpinto/action-automatic-releases@v1.2.1"
+        ## if: github.ref == 'refs/heads/main'
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          automatic_release_tag: "extension-latest"
+          prerelease: true
+          title: "Extension Development Build"
+          files: browser-extension/.output/
+
   e2e-tests:
     defaults:
       run:

browser-extension/.env.example

@@ -0,0 +1 @@
+#VITE_BACKEND_API_BASE_URL=http://localhost:8000

browser-extension/CONTRIBUTING.md

@@ -0,0 +1,55 @@
+# Comment développer l'extension
+
+# Installer l'environnement de dev
+
+- Installer pnpm
+- `pnpm install` dans le répertoire browser-extension
+
+## Installer l'extension en mode dev dans Chrome
+
+- Lancer `pnpm dev` qui lance un serveur
+- Charger le répertoire .output/chrome-mv3-dev comme extension non empaquetée (voir https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked)
+
+A partir de là la plupart des changements sont propagés automatiquement dans l'extension navigateur sans besoin de rafraichir manuellement l'extension.
+
+## Vérifier les changements
+
+Verifier le formattage et le lint de code:
+
+- `pnpm format` format le code avec prettier
+- `pnpm lint` lint le code avec eslint
+- `pnpm lint:fix` lint le code et fix les issues qu'il peut corriger automatiquement
+
+Lancer les tests automatiques:
+
+- `pnpm test` lance les tests unitaires basé sur vitest
+- `pnpm test:e2e` lance les tests end-to-end avec Playwright
+
+# Configurer l'extension pour pointer vers le backend de classification locale
+
+Par défaut l'extension utilise le backend de classification déployé en staging.
+Pour utiliser un backend déployé localement: copier `.env.example` vers `.env` et décommenter la ligne `VITE_BACKEND_API_BASE_URL=http://localhost:8000`
+
+Voir dans [](../backend/README.md) pour comment démarrer le backend.
+
+# Ajouter des composants de la library UI shadcn
+
+Explorer les composants ici: https://ui.shadcn.com/docs/components
+Lancer la commande indiquée dans la doc du composant pour l'installer
+e.g. `pnpm dlx shadcn@latest add accordion`
+
+# Architecture
+
+## Documentation d'architecture
+
+[Voir la doc d'architecture frontend](../docs/frontend)
+
+## Stack de l'extension:
+
+- [wxt](https://wxt.dev/) framework pour faciliter le dev de web-extension
+- [React](https://fr.react.dev/)
+- [shadcn/ui](https://ui.shadcn.com/docs) comme library de composants
+- [tanstack query](https://tanstack.com/query/latest)
+- [vitest](https://vitest.dev/) comme framework de test
+- prettier comme formatter
+- eslint comme linter

browser-extension/README.md

@@ -1,42 +1,39 @@
 # Extension Navigateur Balance Tes Haters
 
-Cette extension permet de capturer les commentaires depuis des publications réseau sociaux.
+Cette extension permet de capturer les commentaires depuis des publications des réseaux sociaux.
 
-# Contributing
+# Pour contribuer
 
-Stack de l'extension:
+Voir [./CONTRIBUTING.md](./CONTRIBUTING.md)
 
-- [wxt](https://wxt.dev/) framework pour faciliter le dev de web-extension
-- [React](https://fr.react.dev/)
-- [shadcn/ui](https://ui.shadcn.com/docs) comme library de composants
-- [tanstack query](https://tanstack.com/query/latest)
-- [vitest](https://vitest.dev/) comme framework de test
-- prettier comme formatter
-- eslint comme linter
+# Installer l'extension
 
-## Installation
+(Pour installer en mode dev voir [./CONTRIBUTING.md](./CONTRIBUTING.md))
 
-- Installer pnpm
-- `pnpm install` dans le repertoire extension
+Pour installer depuis un zip:
 
-## Mode dev (avec chrome)
+- Télécharger le zip
+- Dézipper le fichier et copier le chemin vers le répertoire dézippé
+- Ouvrir Google Chrome
+- Accéder à la page "Extensions" en cliquant sur le menu "..." > "Extensions" > "Gérer les extensions":
+- Activez le mode développeur en cliquant sur le bouton en haut à droite
+- Cliquez sur le bouton "Charger l'extension non empaquetée", puis sélectionnez le répertoire où l'extension a été dézippée plus haut.
+  ![Menu](doc/install-step1.png)
+  ![Page gérer les extensions](doc/install-step2.png)
 
-- Lancer `pnpm dev`
-- Charger le répertoire .output/chrome-mv3-dev comme extension non empaqueté (see https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked)
+3. Épingler l'extension en cliquant sur le bouton puzzle puis sur l'épingle à côté de l'extension
+   ![Epingler l'extension](doc/install-setp3.png)
 
-A partir de là la plupart des changements sont propagé automatiquement dans l'extension navigateur sans besoin de rafraichir manuellement l'extension.
+# Utiliser l'extension
 
-## Ajouter de composants le la library ui shadcn
+## Faire une capture
 
-Explorer les composants ici: https://ui.shadcn.com/docs/components
-Lancer la commande indiquer dans la doc du composant pour l'installer
-e.g. `pnpm dlx shadcn@latest add accordion`
+1. Naviguer vers une publication pour laquelle une capture est supportée :
+   - Pour YouTube il s'agit d'une vidéo avec une URL de la forme https://www.youtube.com/watch?v=videoid
+   - Pour instagram il s'agit d'un post avec une url de la forme instagram.com/p/C56ZonItOfO/
+2. Lancer la capture en cliquant sur le bouton de l'extension à coté de la barre d'adresse puis sur "Analyser ce post" dans la popup
+   ![Analyser ce post](doc/analyser-post.png)
 
-## Scripts pnpm
+## Voir les résultats
 
-- `pnpm dev` démarrage de l'extension en mode dev (voir ci dessus)
-- `pnpm test` lance les tests unitaires
-- `pnpm format` format le code avec prettier
-- `pnpm lint` lint le code avec eslint
-- `pnpm lint:fix` lint le code et fix les issues qu'il peut corriger automatiquement
-- `pnpm check-all` lance toute les vérifications
+Cliquer sur le bouton de l'extension à côté de la barre d'adresse puis sur "Voir les analyses précédentes" dans la popup

browser-extension/doc/analyser-post.png

@@ -19,7 +19,7 @@
     "format:check": "prettier --check .",
     "test": "vitest",
     "check-all": "pnpm lint && pnpm format:check && pnpm test run && pnpm compile",
-    "test:e2e": "playwright test",
+    "test:e2e": "playwright test --retries=3",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:debug": "playwright test --debug",
     "test:e2e:report": "playwright show-report"