Anytype Clipper

Extension Chrome qui extrait le contenu principal d'une page web et le sauvegarde dans Anytype en Markdown, avec un tag "clipping" automatique.

Contrairement aux extensions existantes qui capturent la page entiere (nav bars, pubs, icones reseaux sociaux...), Anytype Clipper utilise Defuddle (la meme lib que l'Obsidian Web Clipper) pour extraire uniquement le contenu pertinent.

Fonctionnalites

• Extraction intelligente — Defuddle supprime automatiquement nav bars, pubs, boutons sociaux, footers
• Conversion Markdown — Le contenu HTML est sanitize (DOMPurify) et converti en Markdown propre (Turndown)
• Edition avant sauvegarde — Modifier le titre, l'auteur et les tags dans le popup avant de clipper
• Selection manuelle — Si l'extraction auto echoue, selectionnez du texte sur la page et reclipez
• Tag "clipping" automatique — Chaque clip est tague pour un filtrage facile dans Anytype
• Metadonnees enrichies — Auteur, date de publication, site source, nombre de mots

Pre-requis

• Anytype desktop (version 0.39+) lance sur votre machine
• L'API locale Anytype doit etre accessible sur http://localhost:31009
• Node.js 18+ (pour builder depuis les sources)

Installation depuis les sources

# Cloner le repo
git clone https://github.com/VOTRE_USER/anytype-clipper.git
cd anytype-clipper

# Installer les dependances
npm install

# Builder l'extension
npm run build

Puis dans Chrome :

1. Aller dans chrome://extensions/
2. Activer le Mode developpeur (toggle en haut a droite)
3. Cliquer Charger l'extension non empaquetee
4. Selectionner le dossier dist/

Premiere utilisation

1. Cliquer sur l'icone Anytype Clipper dans la barre d'outils Chrome
2. Cliquer Se connecter a Anytype
3. Un code a 4 chiffres s'affiche dans l'app Anytype desktop — saisissez-le
4. Choisir votre space par defaut
5. C'est pret ! Naviguez sur un article et cliquez sur l'icone pour clipper

Utilisation

1. Naviguez sur une page web (article, blog, doc...)
2. Cliquez sur l'icone Anytype Clipper
3. Verifiez/editez le titre, l'auteur et les tags
4. Cliquez Clipper dans Anytype
5. L'objet est cree dans votre space avec le contenu en Markdown

Selection manuelle

Si l'extraction automatique ne fonctionne pas (page dynamique, SPA...) :

1. Selectionnez le texte souhaite sur la page
2. Cliquez sur l'icone Anytype Clipper
3. Le texte selectionne sera utilise a la place de l'extraction auto

Developpement

# Build en mode watch (rebuild automatique a chaque modification)
npm run dev

# Verification des types TypeScript
npm run typecheck

# Build de production
npm run build

Structure du projet

src/
  background.ts        — Service worker : communication API Anytype
  content.ts           — Content script : extraction Defuddle dans la page
  popup/               — Interface du popup (preview, edit, clip)
  settings/            — Page de configuration (space, deconnexion)
  utils/
    anytype-api.ts     — Client API REST Anytype (auth, CRUD)
    extractor.ts       — Wrapper Defuddle + selection manuelle
    markdown.ts        — Pipeline DOMPurify + Turndown (HTML → Markdown)
    storage.ts         — Helpers chrome.storage.local
  types/
    messages.ts        — Types TypeScript pour les messages inter-composants

Architecture

Popup ──inject──> Content Script (Defuddle dans le DOM)
  |                    |
  |<──── extracted ────┘
  |
  |──message──> Background Service Worker
                    |
                    |──fetch──> Anytype API (localhost:31009)

Stack technique

• TypeScript + Manifest V3
• Defuddle — extraction de contenu (meme lib que l'Obsidian Clipper)
• DOMPurify — sanitization HTML
• Turndown — conversion HTML → Markdown
• Vite — build tool

API Anytype

L'extension communique avec l'API REST locale d'Anytype :

• POST /v1/auth/challenges — Initier le pairing
• POST /v1/auth/api_keys — Echanger le code contre un token
• GET /v1/spaces — Lister les spaces
• POST /v1/spaces/{id}/objects — Creer un objet

Documentation : https://developers.anytype.io/

Licence

MIT