Pinterest Notları Chrome Uzantısı Oluşturun

Bu öğretici en küçük yararlı Chrome Manifest V3 prototipi oluşturur: Pinterest Pin sayfalarında monte edilmiş, sayısal Pin ID ile anahtarlanmış ve kaydedilen özel bir tekstarea chrome.storage.localBu, kasıtlı olarak bir prototip, Pinterest'in eski notlarının üretime hazır bir klonu değil.

Pinterest'in DOM'u bildirimde bulunmaksızın değiştirebilirsiniz. seçicileri izole tutun, Pinterest'in korunan markasını taklit etmeyi önleyin ve desteklediğiniz sayfa türleri ve yerleri test edin.

1. Manifest V3 uzantısı oluşturun

Bir dosya oluşturun Manifest.json için ve içerik.jsChrome’un Manifesto Referans Mevcut anahtarlar için gerçeğin kaynağıdır.

{ "manifest_version": 3, "name": "Pin Konteks Prototype", "version": "0.1.0", "description": "Pinterest Pin için özel bir yerel not kaydedin.", "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;

Host karşılaştırması geniş çünkü Pinterest müşteri tarafında navigasyon kullanır. eğer özellik daha az rota veya ülke alanlarını desteklerse, dar ve kapsamlı bir belge.

2. Pin URL'den sabit bir anahtar çıkarın

Bir kartın konumu veya görünür başlığı ile anahtar notları yapmayın. sayısal kimliği kanonik bir karttan çıkarın /Pin / ... Yol ve Geri Dönüş null Başka her yerde.

bu ilanı beğen Eki 14 GetPinId(url = location.href) { try { const { pathname } = new URL(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; }

Geçerli ayrıntılar için URL'leri, sorgulama çubukları, PIN olmayan sayfaları, yanlış biçimlendirilmiş URL'leri ve desteklediğinizi iddia ettiğiniz herhangi bir yerel desenleri test edin.

3. Versiyonlu bir kayıt kaydetmek

Gelişmiş göçün mümkün olmasını sağlamak için şunları açık tutun:

async fonksiyon readNote(pinId) { const key = 'pin-note:' + pinId; const result = bekle chrome.storage.local.get(key); return result[key] ?? { versiyonu: 1, pinId, metin: '', güncellenmişAt: null }; } async fonksiyon writeNote(pinId, metin) { const key = 'pin-note:' + pinId; const record = { versiyonu: 1, pinId, metin, güncellenmişAt: new Date().toISOString() }; bekle chrome.storage.local.set({ [key]: record }); return record; }

Chrome'da 10 MB sınırı varsayılan olarak depolama alanı.localayrı ayrı bir Sınırsız depolama Chrome ayrıca uzantının kaldırıldığında yerel uzantı depolamasının silineceğini belgelemektedir. depolama API belgeleri Önemli verileri davet etmeden önce ihracat tasarımı.

4. Bir izole edilmiş, erişilebilir editör oluşturun

Bir Gölge DOM rastgele stil çarpışmalarını azaltır. örnek sayfa vücuduna yapıştırılır, bu yüzden büyük bir Pinterest sınıf adı ile bağımlı değildir:

async fonksiyon mountEditor(pinId) { if (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'); document.set.setAttribute('aria-label', 'Private note'); status status.

Interface metin oluşturmak ile YazıDevamıİnanılmaz değil içeride HTMLGörünür odaklama tarzları, yeterli kontrast, gerçek bir etiket, klavye erişimi ve odaklanmayı çalmayan durum metni ekleyin.

5. Her anahtarlıkta yazmadan kurtarın

fonksiyon bindAutosave(editor, status, pinId) { let saveTimer; editor.addEventListener('input', () => { status.textContent = 'Unsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { try { wait writeNote(pinId, editor.value); status.textContent = 'Locally Saved'; } catch (error) { console.error('Pin note save failed', error); status.textContent = 'Can't save'; } }, 400); } }

Üretim için, aynı zamanda sayfa geçişinde bekleyen girişleri kaydırın, birbirlerini aşırı yazan iki sekme karşı koruyun, maksimum not boyutu ve yüzey kvota hataları belirleyin.

6. Pinterest'in müşteri tarafı navigasyonunu yönetin

Bir tek seferlik sayfa yükleme işlemcisi, kaynak ve ayrıntılı görüntüler arasındaki navigasyonu kaybeder. idempotent bir uzlaşma fonksiyonu kullanın ve her mutasyonda uzaktan kumandadan değişiklikleri gözlemleyin:

bu ilanı beğen Eki 14 I'm going to go to the house. bu ilanı gizle geri yükle bu ilanı geri yükle bu ilanı geri yükle

Bir üretim versiyonu da mümkün olduğunca doğrudan navigasyon durumunu izlemeli ve artık ihtiyacı olmayan gözlemcileri bağlamalıdır. uzun süreli kodları profillendir; sayfa performansını bozacak doğru bir özellik hala kötü bir uzantıdır.

7. Manifest V3 güvenlik kısıtlamalarına saygı göstermek

Manifest V3 uzaktan barındırılan yürütülebilir kod yasaklar. uzantı ile JavaScript yürütülebilir bağlayın, gerekçeli bir değişiklik yapmadığınız sürece varsayılan içerik güvenlik politikası tutun, dinamik kod yürütülmesini önleyin ve yalnızca özelliği gerektiren izinleri isteyin. Manifest V3 İncelemesi Platform modelini anlatıyor.

8. Gerçek bir ürün ihtiyacı özellikleri eklemek

• JSON ihracat / ithalat, şemalar doğrulama ve çatışma yönetimi ile;
• İyileşme için insan okunabilir ihracat;
• Arama ve seçmeli etiketler;
• depolama ve kvota raporlama;
• not başına ve tüm veriler için silinme;
• gözlemlenebilir davranışlarla uyumlu bir gizlilik politikası;
• Program versiyonları arasındaki göç testleri;
• açık kaldırma ve senkronizasyon uyarıları;
• hata telemeti yalnızca dikkatli minimizasyon ve açıklama ile.

9. Başarısızlık yollarını test etmek

1. Paketlenmemiş uzantıyı şarj edin Chrome / Genişletme.
2. Bir feed, bir tablo, bir Pin ayrıntı sayfası ve bir Pin olmayan rota ziyaret edin.
3. İki Pins arasında yeniden yükleme olmadan navigasyon yapın ve not izolasyonunu doğrulayın.
4. Aynı Pin'i iki sekte açın ve çatışma davranışını test edin.
5. Depolama devre dışı bırakın veya kvota başarısızlığını simüle edin ve uyarıyı doğrulayın.
6. Bir test kaydı çıkarın, bir test kaydı çıkarın ve geri getirin.
7. Test klavye navigasyonu, zoom, ekran okuyucu etiketleri ve karanlık / ışık sayfa koşulları.

Mühendislik Dersleri

Bir güvenilir Pinterest uzantısı istikrarlı kimlik, dayanıklı yaşam döngüsü yönetimi, erişilebilir UI, sınırlı izinler, belgelendirilmiş depolama ve test edilmiş bir çıkış yolu ile bağlıdır. özellik listesini genişletmeden önce bu nitelikleri oluşturun.

Yazar Hakkında

Salo, dijital organizasyon, Pinterest çalışma akışları ve daha iyi düşünme araçları hakkında yazan bir ürün tasarımcısı ve güç kullanıcısıdır.