بناء إضافة ملاحظات Pinterest لمتصفح كروم

هذا الدليل يبني أصغر نموذج مفيد من Chrome Manifest V3: مكتبة نصية خاصة تم تجميعها على صفحات Pinterest Pin ، مع مفتاح رقمية PIN ID ، وتخزينها في chrome.storage.localإنها عن قصد نموذج بروتوكول، وليس استنساخًا جاهزًا للإنتاج من الملاحظات السابقة لـ Pinterest.

يمكن أن يتغير DOM من Pinterest دون إشعار.حافظ على المختارين معزولين، وتجنب تقليد العلامة التجارية المحمية من Pinterest، واختبار جميع أنواع الصفحات والمواقع التي تدعمها.

1- إنشاء التمديد المظاهر V3

إنشاء مجلد مع ملاحظةJSON و و محتوى .jsكروم من إشارة واضحة هو مصدر الحقيقة للمفاتيح المتاحة.

{ "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": "document_idle" }

يعتبر مسابقة المضيف واسعة لأن Pinterest يستخدم الملاحة على جانب العميل.إذا كانت ميزتك تدعم مسارات أقل أو نطاقات بلد، فإنها ضيقة وثيقة تتضمن نطاقها.

استنتاج مفتاح مستقر من URL Pin

لا تضع ملاحظات مفتاحية حسب موقع البطاقة أو العنوان المرئي. / بين / ... الطريق والعودة صفر في كل مكان آخر.

وظيفة getPinId(url = location.href) { try { const { pathname } = new URL(url) ؛ const match = pathname.match(//pin/(d+)/?/ ؛ return match ? match[1] : null ؛ } catch { return null ؛ }

اختبار التفاصيل الصحيحة عناوين URL، صفوف الاستعلام، صفحات غير PIN، عناوين URL الخاطئة، وأي نموذج محلي تقول أن تدعم.

3- حفظ سجل نسبي

الحفاظ على الجدول الزمني صريح بحيث تكون الهجرة المستقبلية ممكنة:

ملاحظة (pinId) { const key = 'pin-note:' + pinId؛ const result = await chrome.storage.local.get(key)؛ return result[key]؟ { النسخة: 1، pinId، النص: '، تحديثAt: null }؛ } async function writeNote(pinId، النص) { const key = 'pin-note:' + pinId؛ const record = { النسخة: 1، pinId، النص، تحديثAt: new Date().toISOString() }؛ await chrome.storage.local.set({ [key]: record }؛ return record؛ }

كروم مستندات الحد الافتراضي 10 ميغابايت التخزين.localوبالإضافة إلى انفصال التخزين غير محدود يُسمح بتكبيرها.كروم يثبت أيضًا أن تخزين التمديد المحلي يتم إزالته عند إزالة التمديد. التخزين API الوثائق وتصميم الصادرات قبل دعوة البيانات الهامة.

4- إعداد محرر منفصل ومتاح

يقلل DOM الظل من تصادمات النمط العشوائي.المثال يرفع إلى جسم الصفحة بحيث لا يعتمد على اسم فئة Pinterest البريطاني:

وَقَالَ الْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِمُونَ: وَالْمُسْلِم

إنشاء رابط النص مع نصيحةلا يثقون داخل HTMLإضافة أنماط التركيز المرئية، والتباين الكافي، والعلامة الحقيقية، والوصول لوحة المفاتيح، والنص الوضع الذي لا يسرق التركيز.

5- حفظ دون كتابة على كل قفص

وظيفة bindAutosave(المنشور، حالة، pinId) { اسمحوا لـTimer؛ editor.addEventListener('input', () =>؛ { status.textContent = 'Unsaved'؛ clearTimeout(saveTimer)؛ saveTimer = setTimeout(async () =>؛ { حاول { انتظر writeNote(pinId، editor.value)؛ status.textContent = 'مخفية محليا'؛ } catch (خطأ) { console.error('Pin note save failed', error)؛ status.textContent = 'لا يمكن حفظها'؛ } }، 400؛ }؛ }؛ }؛ }؛

للإنتاج، أيضا التلاعب مدفوع الإدخال على صفحة الانتقال، وحماية من اثنين من علامات التبويب التي تتجاوز بعضها البعض، وتحديد الحد الأقصى لحجم الملاحظة، ومصدر السطح الأخطاء.

التعامل مع الملاحة الجانبية للعملاء من Pinterest

يغيب أحد أجهزة التحميل لمرة واحدة عن الملاحة بين المواد الغذائية والنظرات التفصيلية.استخدم وظيفة تسامح غير قوية ومراقبة التغييرات دون إزالتها على كل تحول:

وَقَوْلُهُ تَعَالَى: {وَمَا كَانُوا يَعْمَلُونَ} [الأنعام: 54]، {وَمَا كَانُوا يَعْمَلُونَ} [الأنعام: 54]، {وَمَا كَانُوا يَعْمَلُونَ} [الأنعام: 54]، {وَمَا كَانُوا يَعْمَلُونَ} [الأنعام: 54]، {وَمَا كَانُوا يَعْمَلُونَ} [الأنعام: 54]، {وَمَا كَانُوا يَعْمَلُونَ} [الأنعام: 54]، {وَمَا كَانُوا يَعْمَلُونَ} [الأنعام: 54]، {وَمَا كَانُوا يَعْمَلُونَ} [الأنعام:

ينبغي أيضًا إصدار إنتاج مراقبة حالة الملاحة مباشرة حيثما كان ذلك ممكناً وإلغاء الاتصال بالمراقبين الذي لم يعد بحاجة إليه.

الالتزام بالقيود الأمنية المتعلقة بـ Manifest V3

يمنع Manifest V3 استضافة رمز التنفيذ عن بُعد.Bundle executable JavaScript مع التمديد، والحفاظ على سياسة أمن المحتوى الافتراضي ما لم يكن لديك تغيير مبرر، وتجنب تنفيذ رمز ديناميكي، وطلب فقط الإذن المطلوبة من ميزة Chrome. ملاحظة V3 شرح نموذج المنصة.

إضافة الميزات احتياجات المنتج الحقيقية

• JSON تصدير / استيراد مع التصديق على المخططات ومعالجة النزاعات.
• تصدير القراءة البشرية للاسترداد؛
• البحث والعلامات الاختيارية؛
• إحصاءات الاستخدام والتخزين؛
• إلغاء البيانات لكل ملاحظة وكل البيانات؛
• سياسة الخصوصية التي تتوافق مع السلوك الملاحظ.
• اختبارات الهجرة بين إصدارات المخطط؛
• إلغاء التثبيت الواضح وعدم التزامن التحذيرات؛
• أخطاء التليميتر فقط مع الحد الأدنى الدقيق والإفصاح.

3- اختبار مسارات الفشل

1. تحميل التمديد غير المعبأة من كروم://تمديدات.
2. قم بزيارة مرفق، ورقة، صفحة تفاصيل Pin، ومسار غير Pin.
3. الملاحة بين اثنين من البنود دون إعادة تحميل وتأكيد عزل الملاحظات.
4. افتح نفس البن في خزانتين واختبر سلوك النزاع.
5. إلغاء تشغيل التخزين أو محاكاة فشل حصة والتحقق من التحذير.
6. تصدير، إزالة سجل الاختبار، واستعادة.
7. اختبار لوحة المفاتيح الملاحة، زوم، علامات القارئ الشاشة، وشروط الصفحة الداكنة/الضوئية.

الدرس الهندسي

يعتمد امتداد Pinterest الموثوق به على الهوية المستقرة ، والتعامل مع دورة الحياة المقاومة ، واجهة الإنترنت المتاحة ، والترخيص المحدودة ، والتخزين المكتوب ، ومسار الخروج المختبر.

عن المؤلف

Salo هو مصمم المنتج ومستخدم الطاقة الذي يكتب عن المنظمة الرقمية، وتدفقات العمل Pinterest، وأدوات للتفكير بشكل أفضل.