Bouw een Chrome-extensie voor Pinterest Notes

Deze tutorial bouwt het kleinste bruikbare Chrome Manifest V3-prototype: een privétekstgebied gemonteerd op Pinterest-pinpagina's, ingetoetst op basis van de numerieke pin-ID en opgeslagen in chrome.storage.local. Het is opzettelijk een prototype, en geen productieklare kloon van de eerdere aantekeningen van Pinterest.

De DOM van Pinterest kan zonder voorafgaande kennisgeving worden gewijzigd. Houd selectors geïsoleerd, vermijd het imiteren van de beschermde branding van Pinterest en test alle paginatypen en landinstellingen die u ondersteunt.

1. Maak de Manifest V3-extensie

Maak een map met manifest.json en inhoud.js. Chrome's manifeste verwijzing is de bron van waarheid voor beschikbare sleutels.

{
  "manifest_versie": 3,
  "name": "Pincontext-prototype",
  "versie": "0.1.0",
  "description": "Bewaar een lokale privénotitie voor een Pinterest-pin.",
  "permissions": ["opslag"],
  "content_scripts": [{
    "overeenkomsten": ["https://*.pinterest.com/*"],
    "js": ["inhoud.js"],
    "run_at": "document_idle"
  }]
}

De hostmatch is breed omdat Pinterest navigatie aan de clientzijde gebruikt. Als uw functie minder routes of landdomeinen ondersteunt, beperk en documenteer dat bereik dan.

2. Leid een stabiele sleutel af van de pin-URL

Verwijs niet naar de positie van een kaart of de zichtbare titel. Haal de numerieke ID uit een canoniek bestand /pin/…/ pad en terug nul overal anders.

functie getPinId(url = locatie.href) {
  probeer {
    const { padnaam } = nieuwe URL(url);
    const match = padnaam.match(//pin/(d+)/?/);
    wedstrijd terug? overeenkomen[1]: nul;
  } vangst {
    retourneer nul;
  }
}

Test geldige detail-URL's, queryreeksen, niet-pinpagina's, verkeerd opgemaakte URL's en eventuele landinstellingen die u beweert te ondersteunen. Voeg nooit stilletjes een briefje toe als het identiteitsbewijs onzeker is.

3. Sla een versierecord op

Houd het schema expliciet zodat toekomstige migraties mogelijk zijn:

asynchrone functie readNote(pinId) {
  const sleutel = 'pin-note:' + pinId;
  const resultaat = wacht op chrome.storage.local.get(sleutel);
  resultaat retourneren[sleutel] ?? { versie: 1, pinId, tekst: '', bijgewerktAt: null };
}

asynchrone functie writeNote (pinId, tekst) {
  const sleutel = 'pin-note:' + pinId;
  const-record = {
    versie: 1,
    pinID,
    tekst,
    bijgewerkt op: nieuwe datum().toISOString()
  };
  wacht op chrome.storage.local.set({ [sleutel]: record });
  retourrecord;
}

Chrome hanteert een standaardlimiet van 10 MB voor opslag.lokaal, met een aparte onbeperkte opslag toestemming om deze te vergroten. Chrome documenteert ook dat de lokale extensie-opslag wordt gewist wanneer de extensie wordt verwijderd. Lees de huidige Documentatie voor opslag-API en ontwerpexport voordat belangrijke gegevens worden uitgenodigd.

4. Monteer een geïsoleerde, toegankelijke editor

Een Shadow DOM vermindert onbedoelde stijlbotsingen. Het voorbeeld wordt toegevoegd aan de hoofdtekst van de pagina, zodat het niet afhankelijk is van een broze Pinterest-klassenaam:

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

  const host = document.createElement('opzij');
  host.dataset.pinContextRoot = '';
  host.setAttribute('aria-label', 'Privépinnotitie');
  document.body.append(host);

  const root = host.attachShadow({ modus: 'open' });
  const label = document.createElement('label');
  label.textContent = 'Privénotitie';
  const editor = document.createElement('textarea');
  editor.setAttribute('aria-label', 'Privénotitie voor deze pin');
  const status = document.createElement('span');
  status.setAttribute('rol', 'status');

  const opgeslagen = wacht op readNote (pinId);
  editor.waarde = opgeslagen.tekst;
  root.append(label, editor, status);
  bindAutosave(editor, status, pinId);
}

Maak interfacetekst met tekstInhoud, niet onbetrouwbaar innerlijkeHTML. Voeg zichtbare focusstijlen, voldoende contrast, een echt label, toetsenbordtoegang en statustekst toe die de focus niet steelt.

5. Bewaar zonder bij elke toetsaanslag te schrijven

functie bindAutosave (editor, status, pinId) {
  laat saveTimer;
  editor.addEventListener('invoer', () => {
    status.textContent = 'Niet opgeslagen';
    clearTimeout(saveTimer);
    saveTimer = setTimeout(async () => {
      probeer {
        wacht op writeNote(pinId, editor.value);
        status.textContent = 'Lokaal opgeslagen';
      } catch (fout) {
        console.error('Opslaan van pinnotitie mislukt', fout);
        status.textContent = 'Kan niet opslaan';
      }
    }, 400);
  });
}

Voor productie kunt u ook lopende invoer bij de paginaovergang doorspoelen, beschermen tegen twee tabbladen die elkaar overschrijven, een maximale notitiegrootte definiëren en quotafouten aan het licht brengen.

6. Beheer de clientnavigatie van Pinterest

Een eenmalige handler voor het laden van pagina's mist de navigatie tussen feed- en detailweergaven. Gebruik een idempotente afstemmingsfunctie en observeer veranderingen zonder bij elke mutatie opnieuw te mounten:

laat gepland = false;

asynchrone functie verzoenen() {
  gepland = onwaar;
  const pinId = getPinId();
  const bestaande = document.querySelector('[data-pin-context-root]');
  als (!pinId) {
    bestaand?.remove();
    opbrengst;
  }
  if (bestaand?.dataset.pinId === pinId) return;
  bestaand?.remove();
  wacht op mountEditor(pinId);
  const aangekoppeld = document.querySelector('[data-pin-context-root]');
  if (gemonteerd) mount.dataset.pinId = pinId;
}

nieuw MutationObserver(() => {
  bij (geplande) terugkeer;
  gepland = waar;
  requestAnimationFrame(reconcile);
}).observe(document.documentElement, {childList: true, subboom: true });

verzoenen();

Een productieversie moet waar mogelijk ook de navigatiestatus rechtstreeks bekijken en waarnemers die deze niet langer nodig hebben, loskoppelen. Profileer de code op lange feeds; een correcte functie die de paginaprestaties verslechtert, is nog steeds een slechte extensie.

7. Respecteer de Manifest V3-beveiligingsbeperkingen

Manifest V3 verbiedt op afstand gehoste uitvoerbare code. Bundel uitvoerbaar JavaScript met de extensie, behoud het standaard inhoudbeveiligingsbeleid tenzij u een gerechtvaardigde wijziging heeft, vermijd uitvoering van dynamische code en vraag alleen de machtigingen aan die de functie vereist. Chrome's Manifest V3-overzicht legt het platformmodel uit.

8. Voeg de functies toe die een echt product nodig heeft

• JSON-export/-import met schemavalidatie en conflicthantering;
• voor mensen leesbare export voor herstel;
• zoeken en optionele tags;
• rapportage over opslaggebruik en quota;
• verwijdering per noot en voor alle gegevens;
• een privacybeleid dat aansluit bij waarneembaar gedrag;
• migratietests tussen schemaversies;
• duidelijke waarschuwingen voor verwijderen en niet-synchroniseren;
• fouttelemetrie alleen met zorgvuldige minimalisering en openbaarmaking.

9. Test de foutpaden

1. Laad de uitgepakte extensie van chrome://extensies.
2. Bezoek een feed, een bord, een pindetailpagina en een niet-pinroute.
3. Navigeer tussen twee pins zonder opnieuw te laden en bevestig de notitie-isolatie.
4. Open dezelfde pin in twee tabbladen en test conflictgedrag.
5. Schakel opslag uit of simuleer quotafouten en controleer de waarschuwing.
6. Exporteer, verwijder een testrecord en herstel deze.
7. Test toetsenbordnavigatie, zoom, schermlezerlabels en donkere/lichte paginaomstandigheden.

De techniekles

Het tekstgebied is het makkelijke gedeelte. Een betrouwbare Pinterest-extensie is afhankelijk van een stabiele identiteit, een veerkrachtige afhandeling van de levenscyclus, een toegankelijke gebruikersinterface, beperkte machtigingen, gedocumenteerde opslag en een getest uitgangspad. Ontwikkel die kwaliteiten voordat u de lijst met functies uitbreidt.

Over de auteur

Salo is een productontwerper en hoofdgebruiker die schrijft over digitale organisatie, Pinterest-workflows en tools voor beter denken.