Erstellen Sie eine Chrome-Erweiterung für Pinterest Notes

In diesem Tutorial wird der kleinste nützliche Chrome Manifest V3-Prototyp erstellt: ein privater Textbereich, der auf Pinterest-Pin-Seiten bereitgestellt, mit der numerischen Pin-ID eingegeben und gespeichert wird chrome.storage.local. Es handelt sich bewusst um einen Prototyp und nicht um einen produktionsreifen Klon der früheren Notizen von Pinterest.

Das DOM von Pinterest kann sich ohne Vorankündigung ändern. Halten Sie Selektoren isoliert, vermeiden Sie die Nachahmung des geschützten Brandings von Pinterest und testen Sie alle von Ihnen unterstützten Seitentypen und Gebietsschemata.

1. Erstellen Sie die Manifest V3-Erweiterung

Erstellen Sie einen Ordner mit manifest.json und content.js. Chromes manifeste Referenz ist die Quelle der Wahrheit für verfügbare Schlüssel.

{
  „manifest_version“: 3,
  „name“: „Pin-Kontext-Prototyp“,
  „Version“: „0.1.0“,
  „description“: „Speichern Sie eine private lokale Notiz für einen Pinterest-Pin.“,
  „Berechtigungen“: [„Speicher“],
  „content_scripts“: [{
    „Übereinstimmungen“: [“https://*.pinterest.com/*“],
    „js“: [„content.js“],
    „run_at“: „document_idle“
  }]
}

Die Host-Übereinstimmung ist breit, da Pinterest eine clientseitige Navigation verwendet. Wenn Ihre Funktion weniger Routen oder Länderdomänen unterstützt, schränken Sie diesen Umfang ein und dokumentieren Sie ihn.

2. Leiten Sie einen stabilen Schlüssel von der Pin-URL ab

Markieren Sie Notizen nicht anhand der Position oder des sichtbaren Titels einer Karte. Extrahieren Sie die numerische ID aus einer kanonischen /pin/…/ Weg und Rückkehr null überall sonst.

Funktion getPinId(url = location.href) {
  versuche es mit {
    const { Pfadname } = neue URL(URL);
    const match = pathname.match(//pin/(d+)/?/);
    Rückspiel? match[1]: null;
  } fangen {
    null zurückgeben;
  }
}

Testen Sie gültige Detail-URLs, Abfragezeichenfolgen, Nicht-Pin-Seiten, fehlerhafte URLs und alle Gebietsschemamuster, die Sie angeblich unterstützen. Fügen Sie niemals stillschweigend eine Notiz bei, wenn die ID unsicher ist.

3. Speichern Sie einen versionierten Datensatz

Halten Sie das Schema explizit, damit zukünftige Migrationen möglich sind:

asynchrone Funktion readNote(pinId) {
  const key = 'pin-note:' + pinId;
  const result = waiting chrome.storage.local.get(key);
  Ergebnis[Schlüssel] zurückgeben ?? { Version: 1, PinId, Text: '', UpdatedAt: Null };
}

asynchrone Funktion writeNote(pinId, text) {
  const key = 'pin-note:' + pinId;
  const-Datensatz = {
    Version: 1,
    pinId,
    Text,
    aktualisiertAt: neues Datum().toISOString()
  };
  wait chrome.storage.local.set({ [key]: record });
  Rückgabedatensatz;
}

Chrome dokumentiert ein Standardlimit von 10 MB für storage.local, mit separatem Unbegrenzter Speicherplatz Erlaubnis zur Vergrößerung. Chrome dokumentiert außerdem, dass der lokale Erweiterungsspeicher gelöscht wird, wenn die Erweiterung entfernt wird. Lesen Sie die aktuelle Dokumentation zur Speicher-API und Design-Export, bevor Sie wichtige Daten einladen.

4. Mounten Sie einen isolierten, zugänglichen Editor

Ein Shadow-DOM reduziert versehentliche Stilkollisionen. Das Beispiel wird an den Seitentext angehängt, sodass es nicht von einem brüchigen Pinterest-Klassennamen abhängt:

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

  const host = document.createElement('aside');
  host.dataset.pinContextRoot = '';
  host.setAttribute('aria-label', 'Private Pin note');
  document.body.append(host);

  const root = host.attachShadow({ mode: 'open' });
  const label = document.createElement('label');
  label.textContent = 'Private Notiz';
  const editor = document.createElement('textarea');
  editor.setAttribute('aria-label', 'Private Notiz für diesen Pin');
  const status = document.createElement('span');
  status.setAttribute('role', 'status');

  const gespeichert = Warten auf readNote(pinId);
  editor.value = gespeicherter.text;
  root.append(label, editor, status);
  bindAutosave(editor, status, pinId);
}

Erstellen Sie Schnittstellentext mit Textinhalt, nicht unzuverlässig innerHTML. Fügen Sie sichtbare Fokusstile, ausreichenden Kontrast, eine echte Beschriftung, Tastaturzugriff und Statustext hinzu, der den Fokus nicht stiehlt.

5. Speichern Sie, ohne bei jedem Tastendruck zu schreiben

Funktion bindAutosave(editor, status, pinId) {
  let saveTimer;
  editor.addEventListener('input', () => {
    status.textContent = 'Nicht gespeichert';
    clearTimeout(saveTimer);
    saveTimer = setTimeout(async () => {
      versuche es mit {
        Warten Sie auf writeNote(pinId, editor.value);
        status.textContent = 'Lokal gespeichert';
      } Catch (Fehler) {
        console.error('Speichern der Pin-Notiz fehlgeschlagen', Fehler);
        status.textContent = 'Konnte nicht gespeichert werden';
      }
    }, 400);
  });
}

Für die Produktion können Sie auch ausstehende Eingaben beim Seitenübergang leeren, vor dem gegenseitigen Überschreiben zweier Tabulatoren schützen, eine maximale Notizgröße festlegen und Kontingentfehler aufdecken.

6. Verwalten Sie die clientseitige Navigation von Pinterest

Bei einem einmaligen Seitenlade-Handler fehlt die Navigation zwischen Feed- und Detailansichten. Verwenden Sie eine idempotente Abgleichsfunktion und beobachten Sie Änderungen, ohne bei jeder Mutation erneut einzuhängen:

let geplant = false;

asynchrone Funktion reconcile() {
  geplant = false;
  const pinId = getPinId();
  const exist = document.querySelector('[data-pin-context-root]');
  if (!pinId) {
    vorhanden?.remove();
    zurückkehren;
  }
  if (existing?.dataset.pinId === pinId) return;
  vorhanden?.remove();
  Warten Sie auf mountEditor(pinId);
  const mount = document.querySelector('[data-pin-context-root]');
  if (mounted) Mounted.dataset.pinId = pinId;
}

new MutationObserver(() => {
  wenn (geplante) Rückkehr;
  geplant = wahr;
  requestAnimationFrame(reconcile);
}).observe(document.documentElement, { childList: true, subtree: true });

versöhnen();

Eine Produktionsversion sollte nach Möglichkeit auch den Navigationsstatus direkt überwachen und nicht mehr benötigte Beobachter trennen. Profilieren Sie den Code bei langen Feeds. Eine korrekte Funktion, die die Seitenleistung beeinträchtigt, ist immer noch eine schlechte Erweiterung.

7. Beachten Sie die Sicherheitseinschränkungen von Manifest V3

Manifest V3 verbietet remote gehosteten ausführbaren Code. Bündeln Sie ausführbares JavaScript mit der Erweiterung, behalten Sie die standardmäßige Inhaltssicherheitsrichtlinie bei, es sei denn, Sie haben eine berechtigte Änderung, vermeiden Sie die dynamische Codeausführung und fordern Sie nur die Berechtigungen an, die die Funktion erfordert. Chromes Manifest V3-Übersicht erklärt das Plattformmodell.

8. Fügen Sie die Funktionen hinzu, die ein echtes Produkt benötigt

• JSON-Export/Import mit Schemavalidierung und Konfliktbehandlung;
• menschenlesbarer Export zur Wiederherstellung;
• Suche und optionale Tags;
• Speichernutzungs- und Quotenberichte;
• Löschung pro Notiz und für alle Daten;
• eine Datenschutzrichtlinie, die dem beobachtbaren Verhalten entspricht;
• Migrationstests zwischen Schemaversionen;
• deutliche Deinstallations- und No-Sync-Warnungen;
• Fehlertelemetrie nur bei sorgfältiger Minimierung und Offenlegung.

9. Testen Sie die Fehlerpfade

1. Laden Sie die entpackte Erweiterung von chrome://extensions.
2. Besuchen Sie einen Feed, ein Board, eine Pin-Detailseite und eine Nicht-Pin-Route.
3. Navigieren Sie ohne Neuladen zwischen zwei Pins und bestätigen Sie die Notizisolation.
4. Öffnen Sie denselben Pin in zwei Tabs und testen Sie das Konfliktverhalten.
5. Deaktivieren Sie den Speicher oder simulieren Sie einen Kontingentfehler und überprüfen Sie die Warnung.
6. Exportieren, entfernen Sie einen Testdatensatz und stellen Sie ihn wieder her.
7. Testen Sie Tastaturnavigation, Zoom, Screenreader-Beschriftungen und dunkle/helle Seitenbedingungen.

Die Ingenieursstunde

Der Textbereich ist der einfache Teil. Eine vertrauenswürdige Pinterest-Erweiterung hängt von einer stabilen Identität, einem stabilen Lebenszyklus-Handling, einer zugänglichen Benutzeroberfläche, eingeschränkten Berechtigungen, dokumentiertem Speicher und einem getesteten Exit-Pfad ab. Bauen Sie diese Qualitäten auf, bevor Sie die Funktionsliste erweitern.

Über den Autor

Salo ist ein Produktdesigner und Power-User, der über digitale Organisation, Pinterest-Workflows und Tools für besseres Denken schreibt.