Créer une extension Chrome Pinterest Notes

Ce didacticiel crée le plus petit prototype utile de Chrome Manifest V3 : une zone de texte privée montée sur les pages d'épingles Pinterest, saisie par l'ID d'épingle numérique et enregistrée dans chrome.storage.local. Il s'agit intentionnellement d'un prototype, et non d'un clone prêt à la production des anciennes notes de Pinterest.

Le DOM de Pinterest peut changer sans préavis. Gardez les sélecteurs isolés, évitez d'imiter la marque protégée de Pinterest et testez sur les types de pages et les paramètres régionaux que vous prenez en charge.

1. Créez l'extension Manifest V3

Créez un dossier avec manifeste.json et contenu.js. Chrome référence manifeste est la source de vérité pour les clés disponibles.

{
  "version_manifeste": 3,
  "name": "Prototype de contexte de broche",
  "version": "0.1.0",
  "description": "Enregistrer une note locale privée pour une épingle Pinterest.",
  "autorisations": ["stockage"],
  "content_scripts": [{
    "correspondances": ["https://*.pinterest.com/*"],
    "js": ["content.js"],
    "run_at": "document_idle"
  }]
}

La correspondance de l'hôte est large car Pinterest utilise la navigation côté client. Si votre fonctionnalité prend en charge moins d’itinéraires ou de domaines de pays, limitez et documentez cette portée.

2. Dérivez une clé stable à partir de l'URL de l'épingle

Ne saisissez pas de notes en fonction de la position d'une carte ou d'un titre visible. Extraire l'identifiant numérique d'un canonique /épingle/…/ chemin et retour nul partout ailleurs.

fonction getPinId (url = emplacement.href) {
  essayez {
    const { chemin } = nouvelle URL (url);
    const match = chemin.match(//pin/(d+)/?/);
    match retour ? match[1] : nul;
  } attraper {
    renvoie null ;
  }
}

Testez les URL de détail valides, les chaînes de requête, les pages sans épingle, les URL mal formées et tous les modèles de paramètres régionaux que vous prétendez prendre en charge. Ne joignez jamais silencieusement une note lorsque l’identité est incertaine.

3. Stockez un enregistrement versionné

Gardez le schéma explicite pour que les migrations futures soient possibles :

fonction asynchrone readNote (pinId) {
  const key = 'pin-note:' + pinId;
  résultat const = attendre chrome.storage.local.get(key);
  retourner le résultat[clé] ?? { version : 1, pinId, texte : ', updateAt : null } ;
}

fonction asynchrone writeNote (pinId, texte) {
  const key = 'pin-note:' + pinId;
  enregistrement const = {
    version : 1,
    identifiant PIN,
    texte,
    updateAt : new Date().toISOString()
  } ;
  wait chrome.storage.local.set({ [clé] : enregistrement });
  dossier de retour ;
}

Chrome documente une limite par défaut de 10 Mo pour stockage.local, avec un séparé Stockage illimité autorisation de l'augmenter. Chrome indique également que le stockage de l'extension locale est effacé lorsque l'extension est supprimée. Lire le courant Documentation de l'API de stockage et exportez la conception avant d'inviter des données importantes.

4. Montez un éditeur isolé et accessible

Un Shadow DOM réduit les collisions accidentelles de style. L'exemple s'ajoute au corps de la page afin qu'il ne dépende pas d'un nom de classe Pinterest fragile :

fonction asynchrone mountEditor (pinId) {
  if (document.querySelector('[data-pin-context-root]')) return;

  const host = document.createElement('à part');
  hôte.dataset.pinContextRoot = '';
  host.setAttribute('aria-label', 'Note d'épingle privée');
  document.body.append(hôte);

  const root = host.attachShadow({ mode : 'open' });
  const label = document.createElement('label');
  label.textContent = 'Note privée';
  const editor = document.createElement('textarea');
  editor.setAttribute('aria-label', 'Note privée pour cette épingle');
  const status = document.createElement('span');
  status.setAttribute('role', 'statut');

  const enregistré = wait readNote (pinId);
  éditeur.value = sauvegardé.texte;
  root.append (étiquette, éditeur, statut);
  bindAutosave (éditeur, statut, pinId);
}

Créer un texte d'interface avec texteContenu, pas méfiant intérieurHTML. Ajoutez des styles de focus visibles, un contraste suffisant, une véritable étiquette, un accès au clavier et un texte d'état qui ne vole pas le focus.

5. Enregistrez sans écrire à chaque frappe

function bindAutosave (éditeur, statut, pinId) {
  laissez saveTimer ;
  editor.addEventListener('input', () => {
    status.textContent = 'Non enregistré';
    clearTimeout(saveTimer);
    saveTimer = setTimeout(async() => {
      essayez {
        wait writeNote(pinId, editor.value);
        status.textContent = 'Enregistré localement';
      } attraper (erreur) {
        console.error('Échec de l'enregistrement de la note PIN', erreur);
        status.textContent = 'Impossible d'enregistrer';
      }
    }, 400);
  });
}

Pour la production, supprimez également les entrées en attente lors de la transition de page, protégez-vous contre l'écrasement de deux onglets, définissez une taille de note maximale et faites apparaître les erreurs de quota.

6. Gérer la navigation côté client de Pinterest

Un gestionnaire de chargement de page unique manque la navigation entre les vues de flux et de détail. Utilisez une fonction de réconciliation idempotente et observez les changements sans remonter sur chaque mutation :

laissez planifié = faux ;

fonction asynchrone concilier() {
  programmé = faux ;
  const pinId = getPinId();
  const existant = document.querySelector('[data-pin-context-root]');
  si (!pinId) {
    existant ?.remove();
    retour;
  }
  if (existant?.dataset.pinId === pinId) return ;
  existant ?.remove();
  attendre mountEditor(pinId);
  const monté = document.querySelector('[data-pin-context-root]');
  if (monté) Mounted.dataset.pinId = pinId ;
}

nouveau MutationObserver(() => {
  si retour (programmé) ;
  programmé = vrai ;
  requestAnimationFrame (réconcilier);
}).observer(document.documentElement, { childList : true, subtree : true });

réconcilier();

Une version de production devrait également surveiller directement l’état de navigation lorsque cela est possible et déconnecter les observateurs dont elle n’a plus besoin. Profiler le code sur des flux longs ; une fonctionnalité correcte qui dégrade les performances de la page reste une mauvaise extension.

7. Respecter les contraintes de sécurité du Manifest V3

Manifest V3 interdit le code exécutable hébergé à distance. Regroupez le JavaScript exécutable avec l'extension, conservez la politique de sécurité du contenu par défaut sauf si vous avez une modification justifiée, évitez l'exécution de code dynamique et demandez uniquement les autorisations requises par la fonctionnalité. Chrome Présentation du manifeste V3 explique le modèle de plateforme.

8. Ajoutez les fonctionnalités dont un vrai produit a besoin

• Exportation/importation JSON avec validation de schéma et gestion des conflits ;
• exportation lisible par l'homme pour la récupération ;
• recherche et balises facultatives ;
• rapports sur l'utilisation du stockage et les quotas ;
• suppression par note et pour toutes les données ;
• une politique de confidentialité qui correspond aux comportements observables ;
• tests de migration entre versions de schéma ;
• effacer les avertissements de désinstallation et de non-synchronisation ;
• télémétrie des erreurs uniquement avec une minimisation et une divulgation minutieuses.

9. Testez les chemins d’échec

1. Chargez l'extension décompressée depuis chrome://extensions.
2. Visitez un flux, un tableau, une page de détails d’épingle et un itinéraire sans épingle.
3. Naviguez entre deux épingles sans recharger et confirmez l’isolement des notes.
4. Ouvrez la même épingle dans deux onglets et testez le comportement des conflits.
5. Désactivez le stockage ou simulez un échec de quota et vérifiez l’avertissement.
6. Exportez, supprimez un enregistrement de test et restaurez-le.
7. Testez la navigation au clavier, le zoom, les étiquettes du lecteur d'écran et les conditions de page sombre/claire.

La leçon d'ingénierie

La zone de texte est la partie la plus facile. Une extension Pinterest digne de confiance dépend d'une identité stable, d'une gestion résiliente du cycle de vie, d'une interface utilisateur accessible, d'autorisations limitées, d'un stockage documenté et d'un chemin de sortie testé. Développez ces qualités avant d’élargir la liste des fonctionnalités.

À propos de l'auteur

Salo est un concepteur de produits et un utilisateur expérimenté qui écrit sur l'organisation numérique, les flux de travail Pinterest et les outils permettant de mieux réfléchir.