पिंटरेस्ट नोट्स क्रोम एक्सटेंशन बनाएं

इस ट्यूटोरियल में सबसे छोटा उपयोगी Chrome Manifest V3 प्रोटोटाइप बनाया गया है: Pinterest पिन पृष्ठों पर एक निजी टेक्स्टरेस, संख्यात्मक पिन आईडी द्वारा कुंजी दी गई, और में संग्रहीत किया गया chrome.storage.localयह जानबूझकर एक प्रोटोटाइप है, न कि Pinterest के पूर्व नोटों का एक उत्पादन तैयार क्लोन।

Pinterest का DOM बिना किसी चेतावनी के बदल सकता है. चयनकर्ताओं को अलग रखें, Pinterest के संरक्षित ब्रांडिंग का अनुकरण करने से बचें, और आप समर्थन करते हैं कि पृष्ठ प्रकार और स्थानों पर परीक्षण करें.

1. Manifest V3 एक्सटेंशन का निर्माण करें

एक फ़ोल्डर बनाने के लिए संदर्भ में JSON और संदर्भ .jsChrome के बारे में स्पष्ट संदर्भ उपलब्ध कुंजी के लिए सच्चाई का स्रोत है।

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

होस्ट मैच व्यापक है क्योंकि Pinterest क्लाइंट-साइड नेविगेशन का उपयोग करता है. यदि आपकी सुविधा कम रास्ते या देश डोमेन का समर्थन करती है, तो संकीर्ण और दस्तावेज जो फैलता है.

2. Pin URL से एक स्थिर कुंजी निकालना

एक कार्ड की स्थिति या दिखाई देने वाले शीर्षक के आधार पर कुंजी नोट न करें. एक कैननिक से संख्यात्मक आईडी निकालना पीएचडी / ... रास्ता और वापसी शून्य कहीं और।

फ़ंक्शन getPinId(url = location.href) { try { const { pathname } = new URL(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; } }

वैध विवरण URLs, पूछताछ पंक्तियों, गैर-पिन पृष्ठों, खराब URLs, और किसी भी स्थानीय पैटर्न का परीक्षण करें जिसे आप समर्थन करने का दावा करते हैं. कभी भी चुपचाप एक नोट जोड़ें जब आईडी अनिश्चित है.

3. एक संस्करण रिकॉर्ड रखें

भविष्य की प्रवासन संभव होने के लिए योजना को स्पष्ट रखें:

एसिन्क फ़ंक्शन readNote(pinId) { const key = 'pin-note:' + pinId; const result = wait 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() }; wait chrome.storage.local.set({ [key]: record }); return record; }

Chrome दस्तावेजों के लिए डिफ़ॉल्ट 10 MB सीमा भंडारण. स्थानीयएक अलग के साथ असीमित भंडारण इसे बढ़ाने की अनुमति. Chrome भी दस्तावेज है कि जब विस्तार हटा दिया जाता है तो स्थानीय एक्सटेंशन स्टोरेज साफ हो जाता है. वर्तमान को पढ़ें API संग्रह दस्तावेज और महत्वपूर्ण डेटा को आमंत्रित करने से पहले निर्यात डिजाइन करें।

4. एक अलग, सुलभ संपादक स्थापित करें

एक छाया डोम यादृच्छिक स्टाइल टकराव को कम करता है. उदाहरण पृष्ठ शरीर पर जोड़ा जाता है ताकि यह एक ब्रिटिश Pinterest क्लास नाम पर निर्भर न हो:

async फ़ंक्शन 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({ मोड: 'open' }); const label = document.createElement('label'); label.textContent = 'Private note'; const editor = document.createElement('textarea'); editor.set.Attribute('label', 'Private note for this Pin'); document.set.setAttribute('aria-label', 'Private note'); document.set.set.set.set.set.append; document.append.append.append.append.append.app.app.app.app.app.app.app.app.app.app

इंटरफ़ेस पाठ बनाने के लिए पाठ संदेशअसुरक्षित नहीं इंटीरियर HTML. दिखाई देने वाले फोकस शैलियों, पर्याप्त विरोधाभास, एक वास्तविक लेबल, कीबोर्ड एक्सेस, और स्टेट टेक्स्ट जो फोकस को चोरी नहीं करता है जो जोड़ें।

5. हर कुंजी पर लिखने के बिना बचाएं

फ़ंक्शन bindAutosave(संपादक, स्टेट, पिनआईड) { लाओ saveTimer; editor.addEventListener('input', () => { status.textContent = 'Unsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { कोशिश करें { इंतजार करें writeNote(pinId, editor.value); status.textContent = 'स्थानीय रूप से बचाया'; } catch (error) { console.error('Pin नोट save failed', error); status.textContent = 'मैं नहीं बचा सकता'; } }, 400); }); }

उत्पादन के लिए, पृष्ठ पारगमन पर लटका हुआ इनपुट भी फ्लैश करें, एक-दूसरे को ऊपर लिखने वाले दो टैब से बचाएं, एक अधिकतम नोट आकार निर्धारित करें, और सतह कूट त्रुटियों।

6. Pinterest के क्लाइंट-साइड नेविगेशन को संभालना

एक बार पृष्ठ लोड प्रबंधक फ़ीड और विवरण दृश्यों के बीच नवाचार खो देता है. एक अविश्वसनीय संतुलन फ़ंक्शन का उपयोग करें और प्रत्येक म्यूटेशन पर रिमोटिंग के बिना परिवर्तनों का निरीक्षण करें:

(ख) अनुसूचित = नकली; एसिन्क फ़ंक्शन संतुलन() { अनुसूचित = नकली; const pinId = getPinId(); const existing = document.querySelector('[data-pin-context-root]'); if (!pinId) { existing?.remove(); return; } if (existing?.dataset.pinId === pinId) return; existing?.remove(); wait mountEditor(pinId); const mounted = document.querySelector('[data-pin-context-root]'); if (mounted) mounted.dataset.pinId = pinId; } new MutationObserver(() => if (schuled) return; true requestAnimame(Frame));

एक उत्पादन संस्करण को सीधे जहां संभव हो, नवाचार स्थिति को भी देखना चाहिए और पर्यवेक्षकों को कनेक्ट करना चाहिए जिसकी उसे अब आवश्यकता नहीं है. लंबी फीड पर कोड को प्रोफाइल करें; एक सही सुविधा जो पृष्ठ प्रदर्शन को कम करती है, अभी भी एक बुरा विस्तार है.

7. Manifest V3 सुरक्षा प्रतिबंधों का सम्मान करें

Manifest V3 दूरस्थ रूप से होस्ट किए जाने वाले निष्पादित कोड को प्रतिबंधित करता है. एक्सटेंशन के साथ निष्पादित जावास्क्रिप्ट बंडल करें, डिफ़ॉल्ट सामग्री सुरक्षा नीति को बनाए रखें, जब तक कि आपके पास एक उचित परिवर्तन न हो, गतिशील कोड निष्पादन से बचें, और केवल सुविधाओं की आवश्यकता की अनुमतिओं का अनुरोध करें. Chrome के V3 की समीक्षा प्लेटफॉर्म मॉडल का वर्णन करें।

8. एक वास्तविक उत्पाद की जरूरत के लिए विशेषताओं को जोड़ें

• JSON निर्यात / आयात योजना वैधता और संघर्ष प्रबंधन के साथ;
• मनुष्य के लिए पढ़ने योग्य निर्यात पुनर्प्राप्ति के लिए;
• खोज और वैकल्पिक टैग;
• भंडारण-उपयोग और क्यूटा रिपोर्टिंग;
• नोट के अनुसार और सभी डेटा के लिए;
• एक गोपनीयता नीति जो अवलोकन योग्य व्यवहार के अनुरूप है;
• योजना संस्करणों के बीच प्रवास परीक्षण;
• स्पष्ट विघटन और गैर-सेंक चेतावनी;
• त्रुटि टेलीमेट्री केवल सावधानीपूर्वक न्यूनतमकरण और प्रकटीकरण के साथ।

9. असफलता के मार्गों का परीक्षण करें

1. अपरिवर्तित एक्सटेंशन से लोड करें क्रॉम एक्सटेंशन.
2. एक फ़ीड, एक बोर्ड, एक पिन विवरण पृष्ठ, और एक गैर-पिन मार्ग का दौरा करें।
3. दो पिन के बीच एक पुनरारंभ के बिना नाविगेट करें और नोट इन्सुलेशन की पुष्टि करें।
4. एक ही पिन को दो टैब में खोलें और संघर्ष व्यवहार का परीक्षण करें।
5. भंडारण को अक्षम करें या क्यूटा विफलता का अनुकरण करें और चेतावनी की पुष्टि करें।
6. निर्यात करें, एक परीक्षण रिकॉर्ड हटा दें, और इसे पुनर्स्थापित करें।
7. टेस्ट कीबोर्ड नेविगेशन, ज़ूम, स्क्रीन-लिडर लेबल, और अंधेरे / प्रकाश पृष्ठ स्थितियों।

इंजीनियरिंग का सबक

एक विश्वसनीय Pinterest एक्सटेंशन स्थिर पहचान, प्रतिरोधी जीवन चक्र प्रबंधन, सुलभ यूआई, सीमित अनुमति, दस्तावेज भंडारण, और एक परीक्षण बाहर निकलने के रास्ते पर निर्भर करता है. सुविधा सूची का विस्तार करने से पहले उन गुणों का निर्माण करें.

लेखक के बारे में

Salo एक उत्पाद डिजाइनर और बिजली उपयोगकर्ता है जो डिजिटल संगठन, Pinterest कार्यप्रवाह और बेहतर सोच के लिए उपकरणों के बारे में लिखता है।