Zbuduj rozszerzenie Pinterest Notes dla Chrome

Ten tutorial zbuduje najmniejszy użyteczny prototyp Chrome Manifest V3: prywatną tekstareę montażową na stronach Pinterest Pin, kluczową numeryczną identyfikatorem Pin i zapisaną w chrome.storage.localJest to celowo prototyp, a nie gotowy do produkcji klon poprzednich notatek Pinterest.

Domy Pinterest mogą się zmieniać bez powiadomienia. trzymaj selektory odizolowane, unikać naśladowania chronionego marki Pinterest i przetestować typy stron i lokalizacje, które wspierasz.

Tworzenie rozszerzenia Manifest V3

Tworzenie folderu z manifest.json i Zawartość.jsChromium wyraźna referencja Jest źródłem prawdy dla dostępnych kluczy.

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

Pochodzenie gospodarza jest szerokie, ponieważ Pinterest wykorzystuje nawigację klient-side. Jeśli Twoja funkcja obsługuje mniej tras lub domen krajowych, wąska i dokument, który obejmuje.

Wyciągnij stabilny klucz z URL Pin

Nie notuj kluczowych notatek na podstawie pozycji karty lub widocznego tytułu. wyciągnij numeryczny ID z kanonicznego /Pin / ... Droga i powrót zero Wszędzie gdzie indziej.

funkcja getPinId(url = location.href) { spróbuj { const { pathname } = nowy URL(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; } }

Testuj ważne szczegóły URL, paski zapytania, strony nie-Pin, zniekształcone URL i wszelkie lokalne wzorce, które twierdzisz, że wspierasz.

3. przechowywanie wersji rejestru

Utrzymuj wyraźny schemat, aby możliwe były przyszłe migracje:

funkcja async readNote(pinId) { const key = 'pin-note:' + pinId; const result = wait chrome.storage.local.get(key); return result[key] ?? { wersja: 1, pinId, tekst: '', zaktualizowanyAt: null }; } async function writeNote(pinId, tekst) { const key = 'pin-note:' + pinId; const record = { wersja: 1, pinId, tekst, zaktualizowanyAt: new Date().toISOString() }; wait chrome.storage.local.set({ [key]: record }); return record; }

Chrome dokumentuje domyślny limit 10 MB dla lokalizacja. lokalizacjaWraz z oddzielnym nieograniczony magazyn Chrome dokumentuje również, że lokalne przechowywanie rozszerzeń jest wyczyszczone po usunięciu rozszerzenia. Przechowywanie API dokumentacji i projektowanie eksportu przed zaproszeniem ważnych danych.

Zbuduj izolowany, dostępny redaktor

DOM Shadow zmniejsza przypadkowe kolizje stylowe. przykład przylega do ciała strony, więc nie zależy od brytyjskiego nazwy klasy Pinterest:

async funkcja mountEditor(pinId) { jeśli (document.querySelector('[data-pin-context-root]')) zwrot; const host = document.createElement('aside'); host.dataset.pinContextRoot = ''; host.setAttribute('aria-label', 'Private Pin note'); document.body.append(host); const root = host.attachShadow({ tryb: 'open' }); const label = document.createElement('label'); label.textContent = 'Private note'; const editor = document.createElement('textarea'); editor.set.Attribute('label', 'Private note'); document.set.setAttribute('aria-label', 'Private note'); status = status'Element'; status'Element'Attribute, status'Attribute, status'Id'd'd'd'd'd'd'd'd'd'd'd'd'

Tworzenie interfejsu tekstu z tekstContentNie bez zaufania WnętrzeHTMLDodaj widoczne style koncentracji, wystarczający kontrast, prawdziwą etykietę, dostęp do klawiatury i tekst stanu, który nie kradnie koncentracji.

5.Zachowaj bez pisania na każdym kluczu

funkcja bindAutosave(editor, status, pinId) { pozwól zaoszczędzićTimer; editor.addEventListener('input', () => { status.textContent = 'Unsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { spróbuj { czekać writeNote(pinId, editor.value); status.textContent = 'Zachowywany lokalnie'; } złapać (error) { console.error('Pin note save failed', error); status.textContent = 'Nie można zaoszczędzić'; } }, 400); })

W przypadku produkcji, również przepłukać wstęp na przejściu strony, chronić przed dwoma zakładkami, które się nadpisują, określić maksymalny rozmiar noty i błędy kwoty powierzchniowej.

Zarządzanie nawigacją klienta Pinterest

Jednorazowy operator ładowania stron przegrywa nawigację między widokiem feed i szczegółami.Użyj niepotężnej funkcji pojednania i obserwuj zmiany bez odwracania się na każdej mutacji:

wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik: wskaźnik:

Wersja produkcyjna powinna również obserwować stan nawigacji bezpośrednio tam, gdzie jest to możliwe i wyłączyć obserwatorów, których już nie potrzebuje. profil kod na długich feedach; właściwa funkcja, która pogarsza wydajność strony, jest nadal zły rozszerzenie.

Uważaj na ograniczenia bezpieczeństwa Manifest V3

Manifest V3 zakazuje zdalnie przechowywane kody wykonawcze.Bundle wykonawcze JavaScript z rozszerzeniem, trzymać standardową politykę bezpieczeństwa treści, chyba że masz uzasadnioną zmianę, unikać dynamicznego kodowania, i żądać tylko pozwolenia wymagane funkcji.Chrome's Manifest V3 przegląd Wyjaśnia model platformy.

Dodaj do funkcji rzeczywiste potrzeby produktu

• JSON eksport/importowanie z schematem weryfikacji i rozwiązywania konfliktów;
• eksportowane przez ludzi do odzyskiwania;
• wyszukiwania i opcjonalne etykiety;
• - przechowywanie i podawanie kwot;
• usunięcie za notatkę i dla wszystkich danych;
• Polityka prywatności, która odpowiada obserwowalnemu zachowaniu;
• testy migracji między wersjami schematu;
• jasne ostrzeżenia o odinstalowaniu i niesynchronizacji;
• Telemetyka błędu tylko z ostrożną minimalizacją i ujawnieniem.

Testowanie ścieżek niepowodzeń

1. Wypełnij niepakowaną rozszerzenie od Chromium / Rozszerzeniai
2. Odwiedź feed, tablicę, stronę szczegółową Pin i trasy nie-Pin.
3. nawiguj pomiędzy dwoma pinsami bez ponownego ładowania i potwierdzaj izolację noty.
4. Otwórz ten sam Pin w dwóch zakładkach i sprawdź zachowanie konfliktu.
5. Wyłączyć przechowywanie lub symulować niepowodzenie kwoty i sprawdzić ostrzeżenie.
6. Eksportować, usunąć rekord testowy i przywrócić go.
7. Testowanie nawigacji klawiatury, zoom, etykiety czytnika ekranu i warunki ciemnej/światłej strony.

Lekcja inżynierii

Wiarygodne rozszerzenie Pinterest zależy od stabilnej tożsamości, wytrzymałej obsługi cyklu życia, dostępnego interfejsu internetowego, ograniczonych zezwoleń, udokumentowanego przechowywania i sprawdzonej drogi wyjścia.

O autorze

Salo jest projektantem produktów i użytkownikiem zasilania, który pisze o organizacji cyfrowej, przepływach pracy Pinterest i narzędziach do lepszego myślenia.