Membangun Ekstensi Catatan Pinterest untuk Chrome

Tutorial ini membangun prototipe Chrome Manifest V3 yang paling kecil yang berguna: tekstarea pribadi yang dipasang di halaman Pinterest Pin, dikunci oleh ID Pin numerik, dan disimpan di chrome.storage.localIni sengaja prototipe, bukan klon siap produksi dari catatan Pinterest sebelumnya.

Pastikan selektor terisolasi, hindari meniru branding Pinterest yang dilindungi, dan menguji jenis halaman dan lokasi yang Anda dukung.

Mencipta Manifest V3 Extension

Membuat folder dengan Tindakan JSON dan Sebut saja.jsdari Chrome Referensi Manifesto adalah sumber kebenaran untuk kunci yang tersedia.

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

Pertandingan tuan rumah adalah luas karena Pinterest menggunakan navigasi klien.Jika fitur Anda mendukung lebih sedikit rute atau domain negara, sempit dan dokumen yang meliputi.

Mengeluarkan kunci yang stabil dari URL Pin

Jangan membuat catatan kunci dengan posisi kartu atau judul yang terlihat.Tarik ID numerik dari kanonik Pin / Pin / Pin Jalan dan Kembali Null Di mana-mana saja yang lain

fungsi getPinId(url = lokasi.href) { cuba { const { pathname } = URL baru(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; } }

Uji detail yang valid URL, baris pertanyaan, halaman non-Pin, URL yang rosak, dan pola lokal apa pun yang Anda anggap mendukung. Jangan diam-diam melampirkan catatan ketika ID tidak pasti.

3. menyimpan rekaman versi

Pastikan jadwal ini jelas sehingga migrasi masa depan mungkin:

fungsi async readNote(pinId) { const key = 'pin-note:' + pinId; const result = tunggu chrome.storage.local.get(key); return result[key] ?? { versi: 1, pinId, teks: '', diperbaruiAt: null }; } async function writeNote(pinId, teks) { const key = 'pin-note:' + pinId; const record = { versi: 1, pinId, teks, diperbaruiAt: new Date().toISOString() }; tunggu chrome.storage.local.set({ [key]: record }); return record; }

Chrome mendokumentasikan batas default 10 MB untuk Penyimpanan.LokalDengan satu yang terpisah Unlimited Penyimpanan izin untuk memperbesarnya. Chrome juga mendokumentasikan bahwa penyimpanan ekstensi lokal dihapus ketika ekstensi dihapus. Penyimpanan API Dokumentasi dan desain ekspor sebelum mengundang data penting.

Meningkatkan editor terisolasi dan terjangkau

Sebuah DOM bayangan mengurangi kerusakan gaya yang tidak sengaja. contohnya melekat pada tubuh halaman sehingga tidak bergantung pada nama kelas Pinterest yang besar:

async fungsi mountEditor(pinId) {jika (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 note'; const editor = document.createElement('textarea'); editor.set.Attribute('label', 'Private note' untuk ini'); document.set.setAttribute('aria-label', 'Private note'); status status status.

Mencipta Interface Text dengan Teka-tekiTidak tidak dipercaya dalam HTMLTambah gaya fokus yang terlihat, kontras yang cukup, label nyata, akses keyboard, dan teks status yang tidak mencuri fokus.

5.Simpan tanpa menulis pada setiap keystroke

fungsi bindAutosave(editor, status, pinId) { let saveTimer; editor.addEventListener('input', () => { status.textContent = 'Unnsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { try { wait writeNote(pinId, editor.value); status.textContent = 'Save locally'; } catch (error) { console.error('Pin note save failed', error); status.textContent = 'Could not save'; } }, 400); }); }

Untuk produksi, juga mengalirkan input pendengaran pada transisi halaman, melindungi dari dua tab yang saling berlebihan, menentukan ukuran catatan maksimum, dan kesalahan kuota permukaan.

Mengendalikan navigasi sisi klien Pinterest

Seorang pengendali beban halaman satu kali melewatkan navigasi antara feed dan pandangan detail. Gunakan fungsi perdamaian yang tidak berdaya dan perhatikan perubahan tanpa menjauh dari setiap mutasi:

(a) yang diatur = palsu; async fungsi reconcile() { diatur = palsu; const pinId = getPinId(); const existing = document.querySelector('[data-pin-context-root]'); jika (!pinId) { existing?.remove(); return; } jika (existent?.dataset.pinId === pinId) return; existing?.remove(); tunggu mountEditor(pinId); const mounted = document.querySelector('[data-pin-context-root]'); jika (mounted) mounted.dataset.pinId = pinId; } mutationObserver(() => jika (schuled) returned = true.dataset.pinId === pinId) return; jika (schuled) returned = true.

Versi produksi juga harus memantau keadaan navigasi langsung di mana mungkin dan mengalihkan pengamat yang tidak lagi dibutuhkan. profil kode pada feed panjang; fitur yang benar yang merusak kinerja halaman masih merupakan perpanjangan yang buruk.

Menghormati Manifest V3 Keterbatasan Keamanan

Manifest V3 melarang kode eksekusi yang di host jauh.Bundle eksekusi JavaScript dengan perpanjangan, menjaga kebijakan keamanan konten default kecuali Anda memiliki perubahan yang beralasan, menghindari eksekusi kode dinamis, dan meminta izin hanya fitur yang diperlukan. Manifest V3 Penjelasan menjelaskan model platform.

Menambahkan fitur kebutuhan produk yang nyata

• JSON ekspor/impor dengan validasi skema dan pengelolaan konflik;
• ekspor yang dapat dibaca oleh manusia untuk pemulihan;
• pencarian dan tag opsi;
• Penyimpanan dan Kota Laporan;
• penghapusan per catatan dan untuk semua data;
• Kebijakan privasi yang sesuai dengan perilaku yang dapat dilihat;
• Pengujian migrasi antara versi skema;
• peringatan pemadaman dan non-sync yang jelas;
• Telemetri kesalahan hanya dengan minimizasi dan pendedahan yang berhati-hati.

3.Test jalan kegagalan

1. Mengisi Extension Unpacked dari Pembangunan / Extensions.
2. Kunjungi feed, papan, halaman detail Pin, dan rute non-Pin.
3. Navigasi antara dua Pin tanpa pengisi ulang dan mengkonfirmasi isolasi nota.
4. Buka Pin yang sama dalam dua tab dan tes perilaku konflik.
5. Mematikan penyimpanan atau simulasi kegagalan kuota dan verifikasi peringatan.
6. Ekspor, menghapus rekaman tes, dan mengembalikannya.
7. Uji navigasi keyboard, zoom, label pembaca layar, dan kondisi halaman gelap/cahaya.

Pelajaran Teknik

Perpanjangan Pinterest yang dapat diandalkan tergantung pada identitas yang stabil, pengendalian siklus hidup yang tahan lama, UI yang dapat diakses, izin terbatas, penyimpanan terdokumen, dan jalan keluar yang diuji.

Tentang penulis

Salo adalah desainer produk dan pengguna daya yang menulis tentang organisasi digital, aliran kerja Pinterest, dan alat untuk pemikiran yang lebih baik.