Construiește o Extensie Chrome pentru Notițele Pinterest

Acest tutorial construiește cel mai mic prototip util Chrome Manifest V3: o textarea privată montată pe paginile Pinterest Pin, cheie de ID-ul numeric Pin, și salvată în chrome.storage.localEste intenționat un prototip, nu un clon gata de producție al anterioarelor note ale Pinterest.

Păstrați selectoarele izolate, evitați să imitați branding-ul Pinterest protejat și testați tipurile de pagini și locațiile pe care le susțineți.

Creați extinderea Manifest V3

Creați un folder cu Cuvânt cheie.json şi Cuvânt cheie.jsÎn cazul Chrome Referință manifestă Este sursa adevarului pentru cheile disponibile.

{ "manifest_version": 3, "name": "Pin Context Prototype", "version": "0.1.0", "description": "Save a private local note for a Pinterest Pin.", "permissions": ["storage"], "content_scripts": ["matches": ["https://.pinterest.com/*"], "js": ["content.js"], "run"quot;quot;quot;quot;quot;quot;quot;quot;quot;quot;quot;quot;quot;quot;

Match-ul de gazdă este larg, deoarece Pinterest utilizează navigația client-side. dacă caracteristica dvs. susține mai puține rute sau domenii de țară, strâns și document care cuprinde.

Derivarea unei chei stabile din URL-ul Pin

Nu faceți notele cheie prin poziția unei cărți sau titlul vizibil. Extrageți ID-ul numeric dintr-un canonic /Pin / ... Calea şi întoarcerea 0 0 0 0 oriunde în altă parte.

funcția getPinId(url = locație.href) { încercați { const { pathname } = URL nou(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; } }

Testarea detaliilor valabile URL-uri, linii de căutare, pagini non-Pin, URL-uri malformate și orice modele locale pe care le pretindeți să le susțineți.

3.Să păstrați un record versiune

Păstrați schema explicită pentru a permite viitoarele migrații:

funcția async readNote(pinId) { const key = 'pin-note:' + pinId; const result = aștept chrome.storage.local.get(key); return result[key] ? { versiune: 1, pinId, text: '', actualizatAt: null }; } async function writeNote(pinId, text) { const key = 'pin-note:' + pinId; const record = { versiune: 1, pinId, text, actualizatAt: new Date().toISOString() }; aștept chrome.storage.local.set({ [key]: record }); return record; }

Chrome documentă o limită de 10 MB pentru depozitare.localCu o separare UnlimitedStorare permisiunea de extindere. Chrome documentă, de asemenea, că stocarea extinderii locale este șterse atunci când extinderea este îndepărtată. Arhivă API documentare și proiectarea exportului înainte de a invita date importante.

Instalarea unui editor izolat și accesibil

Un DOM de umbră reduce coliziunile accidentale ale stilului. exemplul se aplică corpului paginii, astfel încât nu depinde de un nume de clasă Pinterest:

async funcție mountEditor(pinId) { dacă (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({ mod: 'open' }); const label = document.createElement('label'); label.textContent = 'Private note'; const editor = document.createElement('textarea'); editor.set.Attribute('label', 'Private note' pentru acest Pin'); document = status.create'(‘Element's status; status status.Attribute's status; status.

Creați interfață text cu textcontentNu neîncrezătoare în interiorHTMLAdăugați stiluri de focalizare vizibile, contrast suficient, o etichetă reală, acces la tastatură și text de status care nu furează focalizarea.

5.Salvați fără să scrieți pe fiecare cheistroke

funcția bindAutosave(editor, status, pinId) { să salvezeTimer; editor.addEventListener('input', () => { status.textContent = 'Unsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { încercați { așteptați writeNote(pinId, editor.value); status.textContent = 'Salvat local'; } catch (error) { console.error('Pin note save failed', error); status.textContent = 'Nu se poate salva'; } }, 400); }); }

Pentru producție, de asemenea, flush intrarea pending pe tranziția de pagină, protejează împotriva a două taburi care se suprapun unul pe celălalt, definește o dimensiune maximă a notelor și erori de cota de suprafață.

6.Manageriți navigarea client-side a Pinterest

Un operator de încărcare de pagină de o singură dată își pierde navigația între feed-uri și vizualizări detaliate. Utilizați o funcție de reconciliere idempotentă și observați schimbările fără a se distinge de fiecare mutație:

(a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în cazul în care (a) în care (a) în care

O versiune de producție ar trebui, de asemenea, să monitorizeze starea de navigare direct acolo unde este posibil și să dezconecteze observatorii care nu mai au nevoie. Profilați codul pe feed-uri lungi; o caracteristică corectă care degradează performanța paginii este încă o extensie proastă.

Respectarea restricțiilor de securitate ale Manifestului V3

Manifest V3 interzice codul executabil găzduit la distanță.Bundle executabil JavaScript cu extensie, păstrați politica de securitate a conținutului predefinit, dacă nu aveți o schimbare justificată, evitați executarea dinamică a codului și solicitați numai permisiunile necesare caracteristicilor. Manifestul V3 Explică modelul platformei.

Adăugați caracteristicile unei nevoi reale de produs

• JSON export/import cu validarea schemei și gestionarea conflictelor;
• Exportul pentru recuperare citit de om;
• căutare și etichete opționale;
• - utilizarea stocării și raportarea cotei;
• ștergerea pe notă și pentru toate datele;
• o politică de confidențialitate care corespunde comportamentului observat;
• testele de migrație între versiunile schemei;
• avertizări clare de dezinstalare și no-sync;
• telemetrii erorilor numai cu minimizare și dezvăluire atentă.

Testarea căilor de eșec

1. Încărcați extinderea neîncărcată de la Cromă / extensie.
2. Vizitați un feed, un panou, o pagină de detalii Pin și o rute non-Pin.
3. Navigați între două pini fără un reîncărcare și confirmați izolația notelor.
4. Deschideți același Pin în două taburi și testați comportamentul conflictului.
5. Dezactivarea stocării sau simularea eșecului cotei și verificați avertismentul.
6. Exportați, îndepărtați un record de testare și restaurați-l.
7. Testează navigația tastatură, zoom, etichete de ecran-reader și condiții de pagină întunecată / luminoasă.

Lecția de inginerie

O extensie Pinterest de încredere depinde de identitate stabilă, gestionarea durabilă a ciclului de viață, UI accesibile, permisiuni restricționate, stocare documentată și o cale de ieșire testată.

Despre autorul

Salo este un designer de produse și un utilizator de putere care scrie despre organizația digitală, fluxurile de lucru Pinterest și instrumente pentru a gândi mai bine.