Создание расширения Pinterest Notes для Chrome

Этот урок построит самый маленький полезный прототип Chrome Manifest V3: частный текст, настроенный на страницах Pinterest Pin, зафиксированный цифровым PIN ID и сохранившийся в chrome.storage.localОн намеренно является прототипом, а не готовым к производству клоном предыдущих записей Pinterest.

ДЛЯ ПИНТЕРТА ДОМ может меняться без уведомления.Дайте отборы изолированными, избегайте имитирования защищенного бренда ПИНТЕРТА и тестируйте на типах страниц и местах, которые вы поддерживаете.

Создание расширения Manifest V3

Создайте папку с manifest.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

Не записывайте ключевые записки по положению карты или видимому заголовку.Исключите цифровой ID из канонического /Пин / ... Путь и возвращение нуль Всюду в другом.

функция getPinId(url = location.href) { try { const { pathname } = новый URL(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; }

Проверьте валидные подробности URL, ленты запросов, страницы не-Пин, неправильные URL и любые локальные шаблоны, которые вы заявляете о поддержке.

3.Сохранение версифицированного записи

Сохраняйте схему четко, чтобы возможны будущие миграции:

асинк функция readNote(pinId) { const key = 'pin-note:' + pinId; const result = wait chrome.storage.local.get(key); return result[key] ?? { версия: 1, pinId, текст: '', обновленAt: null }; } async функция 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 Мб лимит для хранилище .localс отдельной Неограниченное хранение Chrome также документирует, что локальное хранилище расширения очищается, когда расширение удаляется. Документация API и дизайн экспорта перед приглашением важных данных.

Подготовка изолированного, доступного редактора

Shadow DOM уменьшает случайные стильные столкновения. Пример привязывается к телу страницы, поэтому он не зависит от британского названия класса Pinterest:

асинк функция mountEditor(pinId) {если (document.querySelector('[data-pin-context-root]')) возвращение; 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 for this Pin'); document.set.setAttribute('aria-label', 'Private note for this'); status.

Создание интерфейса текста с текстконтентНе неуверенный Внутренний HTMLДобавьте видимые стили фокуса, достаточное количество контраста, реальную этикетку, доступ к клавиатуре и статус-текст, который не крадет фокус.

Сберегайте без написания на каждом ключевом слое

Функция bindAutosave(редактор, статус, pinId) { пусть SaveTimer; editor.addEventListener('input', () => { status.textContent = 'Unsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { попробуйте { ждать writeNote(pinId, editor.value); status.textContent = 'Save locally'; } catch (error) { console.error('Pin note save failed', error); status.textContent = 'Can't save'; } }, 400); }); }

Для производства, также флэш натянутый ввод на переход страницы, защищает от двух клавиш переписывая друг друга, определяет максимальный размер ноты, и поверхностные квоты ошибок.

Управляйте навигацией клиента Pinterest

Однократный переносчик страницы теряет навигацию между переводными и подробными просмотрами. Используйте неспособную функцию примирения и наблюдайте за изменениями без удаления на каждой мутации:

Позвольте расписаться = фальшивый; асинк функция помириться() { расписаться = фальшивый; const pinId = getPinId(); const existing = document.querySelector('[data-pin-context-root]'); если (!pinId) { existing?.remove(); return; } если (existing?.dataset.pinId === pinId) return; existing?.remove(); wait mountEditor(pinId); const mounted = document.querySelector('[data-pin-context-root]'); если (mounted) mounted.dataset.pinId = pinId; } new MutationObserver(() => если (schuled) return; existing.dataset.pinId === pinId) return; existing.dataset.pinId ======= pinId ===;

Производственная версия также должна следить за состоянием навигации непосредственно, где это возможно, и отключить наблюдателей, которые больше не нужны. Профилировать код на длинных потоках; правильная функция, которая понижает производительность страницы, остается плохим расширенным.

Уважение к ограничениям безопасности Manifest V3

Манифест V3 запрещает удаленно хостинг исполняемого кода. Bundle executable JavaScript с расширением, сохраните стандартную политику безопасности контента, если у вас нет обоснованной изменения, избегайте динамического кода исполнения, и попросите только разрешения, требуемые функцией. Манифест V3 обзор Объясняет модель платформы.

Добавьте к характеристикам реальные потребности продукта

• JSON экспорт/импорт с схемыми валидации и урегулирования конфликтов;
• человекочитаемый экспорт для выздоровления;
• поисковые и факультативные теги;
• - хранение и квота отчетности;
• удаление по ноте и для всех данных;
• Политика конфиденциальности, которая соответствует наблюдаваемому поведению;
• - миграционные испытания между версиями схемы;
• четкое отключение и предупреждения о несинкции;
• Телеметрия ошибок только с тщательным минимизированием и раскрытием.

Тест на пути неудачи

1. Загрузите непакованное расширение от Хроме://экстенцииИ
2. Посетите корзину, планшет, страницу деталей Пин и маршрут без Пин.
3. Навигация между двумя пинами без перезагрузки и подтверждение ноты изоляции.
4. Откройте один и тот же Пин в двух клавиатурах и проверите конфликтное поведение.
5. Отключить хранение или симулировать неудачу квоты и проверить предупреждение.
6. Экспортировать, удалить тест-рекорд и восстановить его.
7. Тест клавиатуры навигация, зум, экран-читатель этикетки, и темные/светлые условия страницы.

Инженерный урок

Достоверное расширение Pinterest зависит от стабильной идентичности, устойчивого обращения с жизненным циклом, доступного интерфейса, ограниченных разрешений, документального хранения и проверенного пути выхода.

О авторе

Salo является дизайнером продуктов и пользователем энергии, который пишет о цифровой организации, рабочих потоках Pinterest и инструментах для лучшего мышления.