Vytvořte rozšíření Pinterest Notes pro Chrome

Tento tutoriál vybuduje nejmenší užitečný prototyp Chrome Manifest V3: soukromou textareu namontovanou na stránkách Pinterest Pin, klíčenou numerickým PIN ID a uloženou v chrome.storage.localJe to úmyslně prototyp, nikoli výrobní klon předchozích poznámek Pinterestu.

DOM Pinterestu se může změnit bez upozornění. udržujte selektory izolované, vyhýbejte se imitování chráněného brandingu Pinterestu a testujte typy stránek a lokalit, které podporujete.

Vytvořte rozšíření Manifest V3

Vytvořte složku s Výsledky - JSON a obsah.jsChromův manifestní reference Je zdrojem pravdy pro dostupné klíče.

{ "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;quot;quot;

Hostovací zápas je široký, protože Pinterest používá navigaci na straně klienta. Pokud vaše funkce podporuje méně tras nebo domén zemí, úzký a dokument, který se rozšiřuje.

Odvod stabilního klíče z URL Pin

Nezapomínejte na klíčovou poznámku podle umístění karty nebo viditelného názvu. /Pin / ... / Cesta a návrat 0 0 0 0 A všude jinde.

funkce getPinId(url = location.href) { try { const { pathname } = nový URL(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; } }

Testujte platné podrobnosti URL, průzkumné řádky, non-Pin stránky, špatně formované URL a jakékoli lokální vzory, které tvrdí, že podporují.

• Uložení verze záznamu

Udržujte harmonogram výslovně, aby budoucí migrace byly možné:

async funkce readNote(pinId) { const key = 'pin-note:' + pinId; const result = čekat chrome.storage.local.get(key); return result[key] ?? { verze: 1, pinId, text: '', aktualizovánA: null }; } async funkce writeNote(pinId, text) { const key = 'pin-note:' + pinId; const record = { verze: 1, pinId, text, aktualizovánA: nový Datum().toISOString() }; čekat chrome.storage.local.set({ [key]: record }); return record; }

Chrome dokumentuje předvolené limity 10 MB pro Úložný.Lokals oddělenou neomezená skladování Chrome také dokumentuje, že místní rozšíření ukládání je vymazáno, když je rozšíření odstraněno. Uložení API dokumentace a design vývozu před pozváním důležitých údajů.

Vytvořte izolovaný, přístupný editor

Shadow DOM snižuje náhodné kolize stylu. Příklad se připojí k tělu stránky, takže nezávisí na britském jménu třídy Pinterest:

async funkce mountEditor(pinId) { pokud (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({ režim: 'open' }); const label = document.createElement('label'); label.textContent = 'Private note'; const editor = document.createElement('textarea'); editor.set.Attribute('label', 'Private note'); document.setAttribute('aria-label', 'Private note'); status = status.

Vytvořte textový rozhraní s TextyContentNení nevěřící Vnitřní HTMLPřidejte viditelné styly zaměření, dostatečný kontrast, reálnou etiketu, přístup k klávesnici a stavový text, který nekradí zaměření.

Záchrana bez psaní na každém klíčovém bodě

funkce bindAutosave(editor, status, pinId) { nechme uložitTimer; editor.addEventListener('input', () => { status.textContent = 'Unsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { zkuste { čekat writeNote(pinId, editor.value); status.textContent = 'Saved locally'; } chytit (error) { console.error('Pin note save failed', error); status.textContent = 'Nemůže být uložen'; } }, 400); })

Pro výrobu, také flush pending vstup na straně přechodu, chrání před dvěma tabulky přepisovat jeden druhého, definovat maximální velikost poznámky, a povrchové kvóty chyby.

Zpracujte navigaci na straně klienta Pinterestu

Jednorázový provozovatel webové stránky ztrácí navigaci mezi výstupem a podrobnými zobrazením.Používejte funkci odpočinku a pozorujte změny bez odkladu na každé mutaci:

Aplikace je k dispozici v případě, že je k dispozici k dispozici k dispozici k dispozici k dispozici k dispozici k dispozici k dispozici.

Výroba verze by měla také sledovat stav navigace přímo tam, kde je to možné a vypnout pozorovatele to už nepotřebuje. profil kód na dlouhých feedů; správná funkce, která degradace výkonu stránky je stále špatný rozšíření.

7. respektujte bezpečnostní omezení Manifest V3

Manifest V3 zakazuje dálkově hostitelný prováděcí kód. Bundle prováděcí JavaScript s rozšířením, udržujte výchozí bezpečnostní politiku obsahu, pokud nemáte odůvodněnou změnu, vyhýbejte se dynamické provádění kódu a požadujte pouze povolení, které funkce vyžaduje. V3 přehled Vysvětluje model platformy.

Přidejte vlastnosti skutečné potřeby produktu

• JSON export/import s schématickou validací a řešení konfliktů;
• Člověk čitelný vývoz pro zotavení;
• vyhledávání a volitelné značky;
• Údaje o skladování a kvótách;
• vymazání na poznámku a pro všechny údaje;
• a) zásady ochrany soukromí, které odpovídají pozorovatelnému chování;
• migrační testy mezi verzemi schématu;
• jasné odinstalování a žádné varování synchronizace;
• chyby telemetry pouze s pečlivou minimalizací a zveřejnění.

Zkoušky neúspěšných cest

1. Vyplňte nezapakované rozšíření z Chrome / RozšířeníA to
2. Navštivte feed, tabulku, detailní stránku Pin a non-Pin trasu.
3. Navigaci mezi dvěma piny bez přenosu a potvrzení izolace poznámek.
4. Otevřete stejný Pin ve dvou karetách a zkuste konfliktní chování.
5. Odstranit skladování nebo simulovat selhání kvót a ověřit upozornění.
6. Export, odstranit testovací záznam a obnovit ho.
7. Testovat navigaci klávesnice, zoom, štítky čtečky obrazovky a tmavé / světlé stránky podmínky.

Inženýrská lekce

Důvěryhodné rozšíření Pinterestu závisí na stabilní identitě, odolné zacházení s životním cyklem, přístupném uživatelském rozhraní, omezených povoleních, dokumentovaném ukládání a testovaném výstupu.

O autorovi

Salo je projektant produktů a uživatel energie, který píše o digitální organizaci, pracovních toků Pinterestu a nástrojů pro lepší myšlení.