Xây dựng Tiện ích Ghi chú Pinterest cho Chrome

Hướng dẫn này xây dựng prototype nhỏ nhất hữu ích của Chrome Manifest V3: một khu văn bản tư nhân được lắp đặt trên các trang Pin Pinterest, được khóa bằng ID Pin số, và được lưu trong chrome.storage.localNó cố ý là một nguyên mẫu, không phải là một clone sẵn sàng sản xuất của các ghi chú trước của Pinterest.

DOM của Pinterest có thể thay đổi mà không cần thông báo. giữ các bộ chọn riêng biệt, tránh mô tả thương hiệu được bảo vệ của Pinterest, và kiểm tra trên các loại trang và địa điểm bạn hỗ trợ.

Tạo Manifest V3 mở rộng

Tạo một thư mục với biểu hiện.json và nội dung.jsCủa Chrome Reference rõ ràng là nguồn của sự thật cho các chìa khóa có sẵn.

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

Sự phù hợp của host là rộng vì Pinterest sử dụng điều hướng bên khách hàng. Nếu tính năng của bạn hỗ trợ ít tuyến đường hoặc tên miền quốc gia, ngắn và tài liệu có phạm vi.

2.Thuyết xuất một khóa ổn định từ URL Pin

Đừng ghi chép chìa khóa theo vị trí của thẻ hoặc tiêu đề có thể nhìn thấy.Hãy lấy ID số từ một thẻ /pin /... Con đường và trở lại 0 0 0 khắp nơi khác.

chức năng getPinId(url = location.href) { try { const { pathname } = new URL(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; } }

Kiểm tra các URL chi tiết hợp lệ, các dòng truy vấn, các trang không PIN, các URL sai định, và bất kỳ mẫu địa phương nào bạn tuyên bố hỗ trợ. Đừng bao giờ im lặng gắn một ghi chú khi ID không chắc chắn.

3. lưu trữ bản ghi phiên bản

Giữ lịch trình rõ ràng để các cuộc di cư trong tương lai có thể:

async chức năng readNote(pinId) { const key = 'pin-note:' + pinId; const result = await chrome.storage.local.get(key); return result[key] ?? { phiên bản: 1, pinId, văn bản: '', cập nhậtAt: null }; } async chức năng writeNote(pinId, văn bản) { const key = 'pin-note:' + pinId; const record = { phiên bản: 1, pinId, văn bản, cập nhậtAt: new Date().toISOString() }; await chrome.storage.local.set({ [key]: record }); return record; }

Chrome tài liệu một giới hạn mặc định 10 MB cho Vị trí.localVới một cách riêng biệt không giới hạn lưu trữ cho phép mở rộng nó. Chrome cũng tài liệu rằng lưu trữ mở rộng địa phương được xóa khi mở rộng được xóa. Tài liệu API lưu trữ và thiết kế xuất khẩu trước khi mời dữ liệu quan trọng.

Mở một biên tập viên riêng biệt, có thể truy cập

A Shadow DOM làm giảm các cuộc xung đột phong cách ngẫu nhiên. ví dụ được gắn vào cơ thể trang để nó không phụ thuộc vào một tên lớp Pinterest lớn:

async function 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({ chế độ: 'open' }); const label = document.createElement('label'); label.textContent = 'Private note'; const editor = document.createElement('textarea'); editor.set.Attribute('label', 'Private note'); document.setAttribute('aria-label', 'Private note'); status status = 'Elttribute'; status = 'Elttribute'; status = 'Elttribute'; status = 'Elttribute'; status = 'Elttribute'; status; status = 'Elttribute'; status

Tạo giao diện văn bản với TextContentKhông bất an Nội dung HTMLThêm các phong cách tập trung có thể nhìn thấy, tương phản đủ, một nhãn thực, truy cập bàn phím, và văn bản trạng thái không đánh cắp tập trung.

5.Thuyết kiệm mà không viết trên mỗi khóa

chức năng 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 = 'Save locally'; } catch (error) { console.error('Pin note save failed', error); status.textContent = 'Can't save'; } }, 400); })

Đối với sản xuất, bạn cũng có thể lưu trữ các bản ghi trên chuyển đổi trang, bảo vệ chống lại hai tab lấp lánh lẫn nhau, xác định kích thước ghi chú tối đa, và lỗi quota bề mặt.

Hướng dẫn hướng dẫn khách hàng Pinterest

Một người xử lý tải trang một lần bỏ lỡ điều hướng giữa các hình ảnh nguồn và chi tiết. Sử dụng một chức năng hòa giải bất lực và quan sát các thay đổi mà không cần tắt trên mỗi đột biến:

cho phép lập trình = giả; chức năng đồng hóa hòa giải() { lập trình = giả; 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) true;

Một phiên bản sản xuất cũng nên xem trạng thái di chuyển trực tiếp ở nơi có thể và tắt các quan sát viên nó không còn cần. Hồ sơ mã trên các nguồn cung cấp dài; một tính năng chính xác mà làm suy giảm hiệu suất trang vẫn là một phần mở rộng xấu.

7.Hãy tôn trọng các hạn chế an ninh của Manifest V3

Manifest V3 cấm mã thực hiện được lưu trữ từ xa.Bundle executable JavaScript với phần mở rộng, giữ chính sách bảo mật nội dung mặc định trừ khi bạn có một sự thay đổi hợp lý, tránh mã thực hiện năng động, và yêu cầu chỉ các quyền mà tính năng yêu cầu.Chrome's Manifest V3 tổng quan Giải thích mô hình nền tảng.

Thêm các tính năng một nhu cầu sản phẩm thực tế

• JSON xuất khẩu / nhập khẩu với chứng nhận kế hoạch và giải quyết xung đột;
• xuất khẩu có thể đọc bằng con người để phục hồi;
• Tìm kiếm và thẻ tùy chọn;
• - Sử dụng lưu trữ và báo cáo quota;
• xóa theo ghi chú và cho tất cả dữ liệu;
• một chính sách bảo mật phù hợp với hành vi có thể được quan sát;
• - Kiểm tra di chuyển giữa các phiên bản kế hoạch;
• • Khởi động rõ ràng và không đồng bộ cảnh báo;
• lỗi telemetry chỉ với sự tối thiểu cẩn thận và tiết lộ.

9/ Kiểm tra các con đường thất bại

1. tải phần mở rộng không đóng gói từ Tải về chrome://extensions.
2. Ghé thăm một feed, một bảng, một trang chi tiết Pin, và một tuyến đường không pin.
3. Đi bộ giữa hai Pins mà không cần tải lại và xác nhận sự cô lập ghi chú.
4. Mở cùng một Pin trong hai tab và kiểm tra hành vi xung đột.
5. Tắt lưu trữ hoặc mô phỏng thất bại quota và xác minh cảnh báo.
6. Xuất, xóa hồ sơ kiểm tra, và khôi phục nó.
7. Kiểm tra điều hướng bàn phím, zoom, nhãn đọc màn hình, và điều kiện trang tối / sáng.

Bài học kỹ thuật

Một phần mở rộng Pinterest đáng tin cậy phụ thuộc vào danh tính ổn định, xử lý vòng đời bền vững, UI có thể truy cập, quyền hạn chế, lưu trữ được tài liệu, và một con đường thoát được thử nghiệm. Xây dựng những phẩm chất trước khi mở rộng danh sách tính năng.

Về tác giả

Salo là một nhà thiết kế sản phẩm và người sử dụng năng lượng viết về tổ chức kỹ thuật số, dòng công việc Pinterest và công cụ để suy nghĩ tốt hơn.