Tampermonkey: сохранить изменения из Inspect Element

Человек держит и смотрит на свой ноутбук

О чём эта статья

Что такое Tampermonkey и как его установить
Как писать userscript: метаданные, @match и структура скрипта
Пример: добавить кнопку “Поделиться в WhatsApp” в существующий виджет
Продвинутые приёмы: MutationObserver, вставка иконки, локальные настройки
Безопасность, риски и GDPR-подсказки
Чек-листы и критерии приёмки

Важно: все изменения выполняются локально в вашем браузере и не меняют исходный сайт для других пользователей.

Что такое Tampermonkey и как установить

Tampermonkey — это менеджер userscript, расширение для браузера, которое позволяет создавать и запускать небольшие JavaScript-скрипты на выбранных страницах. Он доступен для основных браузеров: Chrome, Edge, Firefox, Opera и Safari.

Userscript — это обычный JavaScript-файл с заголовком метаданных, который говорит Tampermonkey, на каких страницах и при каких условиях нужно запускать код.

Как установить:

Откройте официальный сайт Tampermonkey. Сайт обычно сам определяет ваш браузер.
В разделе «Download» нажмите «Get from Store», затем установите расширение из магазина вашего браузера.
После установки появится иконка расширения в тулбаре. Откройте её и перейдите в Dashboard для управления скриптами.

Совет: если ваш браузер на базе Chromium не указан отдельно, попробуйте установить расширение из Chrome Web Store.

Скачать Tampermonkey

Перед началом: что учитывать

Пользуйтесь userscript только на тех сайтах, где вы понимаете последствия правок.
Не запускайте скрипты из ненадёжных источников: userscript — полноценный JavaScript и может украсть данные.
Tampermonkey применяет изменения локально: это удобно, но не заменяет серверную правку сайта.
Если страницы динамические (SPA), потребуется реагировать на изменения DOM при помощи MutationObserver.

Структура userscript и базовый шаблон

Создайте новый скрипт через иконку Tampermonkey → Create a new script. В редакторе вы увидите базовый шаблон метаданных. Пример наглядного заголовка:

// ==UserScript==
// @name        New Userscript
// @namespace   http://tampermonkey.net/
// @version     0.1
// @description Попробовать улучшить страницу локально
// @author      Вы
// @match       http://example.com/*
// @grant       none
// ==/UserScript==

(function() {
  'use strict';
  // Ваш код здесь...
})();

Ключевые поля:

@name — имя скрипта
@version — версия
@description — краткое описание
@match — где выполнять скрипт; можно использовать шаблоны
@grant — права доступа к API Tampermonkey (часто none)

Важно: настройка @match позволяет ограничить область действия скрипта и снизить риск побочных эффектов.

Пример: добавить кнопку “Поделиться в WhatsApp” в виджет шаринга

Задача: в конце статьи на сайте есть виджет шаринга, но нет кнопки WhatsApp. Мы добавим кнопку, которая откроет окно создания сообщения в WhatsApp с текущей ссылкой.

Шаги вкратце:

Найти контейнер виджета шаринга (через Inspect Element)
Создать кнопку в userscript и стилизовать её
Добавить обработчик клика, который открывает ссылку WhatsApp
Сохранить и протестировать

Пример кода (упрощённый):

// создаём кнопку WhatsApp
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Поделиться';

// стили
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';
Whatsapp_btn.style.cursor = 'pointer';

// находим контейнер виджета. Пример: 
const sharingDiv = document.querySelector('div.sharing.bottom');
if (sharingDiv) {
  sharingDiv.appendChild(Whatsapp_btn);
}

// формируем ссылку для WhatsApp
function generateWALink() {
  const pageURL = encodeURIComponent(window.location.href);
  return `https://api.whatsapp.com/send?text=${pageURL}`;
}

// обработчик клика
Whatsapp_btn.addEventListener('click', () => {
  const whatsappURL = generateWALink();
  window.open(whatsappURL, '_blank');
});

Пояснения:

encodeURIComponent защищает URL от специальных символов
window.open открывает новое окно/вкладку. Для десктопной версии WhatsApp может потребоваться установленное приложение
Вместо document.querySelector можно использовать более сложную логику поиска, если структура страницы меняется

Виджет шаринга на странице

Сделать кнопку эстетичной: добавить иконку и адаптацию под тему

Добавим SVG-иконку и минимальную адаптацию стиля, чтобы кнопка выглядела как часть виджета.

// Пример вставки SVG-иконки в кнопку
const svgIcon = `
`;
Whatsapp_btn.innerHTML = svgIcon + " Поделиться";

Совет: используйте свойство prefers-color-scheme для адаптации цвета иконок под тёмную тему.

Динамические страницы: MutationObserver

Если виджет подгружается асинхронно (например, SPA), обычный document.querySelector может вернуть null при первой попытке. В этом случае используйте MutationObserver.

function waitForSelector(selector, cb, timeout = 10000) {
  const el = document.querySelector(selector);
  if (el) return cb(el);

  const observer = new MutationObserver((mutations, obs) => {
    const found = document.querySelector(selector);
    if (found) {
      obs.disconnect();
      return cb(found);
    }
  });

  observer.observe(document.documentElement, { childList: true, subtree: true });

  if (timeout) {
    setTimeout(() => observer.disconnect(), timeout);
  }
}

waitForSelector('div.sharing.bottom', (sharingDiv) => {
  // вставляем кнопку здесь
});

Это надёжнее для страниц, где контент загружается по XHR или через фреймворки (React/Vue/Angular).

Полезные сниппеты и пресеты

Вставка после определённого элемента (insertAfter):

function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Сохранение настроек пользователя в localStorage:

localStorage.setItem('my_wapp_button_pos', 'bottom');
const pos = localStorage.getItem('my_wapp_button_pos');

Эмуляция клика с клавиатуры для доступности:

Whatsapp_btn.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    Whatsapp_btn.click();
  }
});

Критерии приёмки

Кнопка видна на целевой странице и вписана в существующий виджет шаринга
При клике кнопка открывает новое окно с корректной ссылкой на WhatsApp
Скрипт не ломает другие элементы страницы (проверка основных сценариев)
Скрипт активируется только на тех страницах, где это нужно (@match корректно настроен)
Для динамических страниц кнопка появляется в течение разумного времени (например, 10 секунд)

Роль‑ориентированные чек‑листы

Для разработчика:

Проверить @match и область выполнения
Проверить отсутствие конфликтов с глобальными переменными сайта
Добавить логирование ошибок в консоль, не оставляя дебаг-кода в проде

Для продвинутого пользователя:

Хранить резервные копии userscript
Использовать опцию включения/выключения в интерфейсе Tampermonkey

Для системного администратора:

Проверить политику безопасности компании перед установкой расширений
Убедиться, что userscript не отправляет данные на внешние сервера

Риски и меры безопасности

Важно помнить:

Userscript выполняется в контексте сайта и теоретически может читать DOM и сетевые запросы. Не устанавливайте скрипты из непроверенных источников.
Tampermonkey имеет доступ к вашему браузеру — ограничьте список сайтов в @match.
Не сохраняйте чувствительные данные в открытом виде в localStorage.

Рекомендации:

Используйте только scripts с открытым исходным кодом или проверяйте их вручную
Отключайте userscript на сайтах с платёжной формой или с логинами, если скрипт не нужен там
Для обмена скриптов используйте доверенные репозитории или Gist с подписью

Примечание по GDPR и конфиденциальности

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

Матрица совместимости и миграция

Chrome / Edge / Opera (Chromium): полная поддержка Tampermonkey и userscript
Firefox: поддерживается, но есть отличия в API расширений; проверяйте @grant
Safari: поддерживается, но версии и политика расширений отличаются

Миграция с Greasemonkey: код обычно совместим, но метаданные и некоторые API могут требовать правок.

Playbook: быстрый рабочий сценарий

Сформулировать цель и выбрать точную страницу @match
Создать новый userscript в Tampermonkey
На целевой странице найти контейнер через Inspect Element
Написать минимальный код, вставить кнопку, протестировать
Добавить обработчики ошибок и MutationObserver, если нужно
Отключить лишние права в метаданных (@grant none, если возможно)
Задокументировать изменения и хранить резервную копию

Тесты и приёмка

Тестовые кейсы:

Обычная загрузка страницы: кнопка добавлена, клик открывает WhatsApp в новом окне
Перезагрузка страницы: кнопка добавляется снова и работает
Страница с динамической загрузкой: кнопка появляется в течение таймаута
Отключение userscript: страница загружается без ошибок

Примеры сценариев отказа:

Если сайт меняет селекторы, скрипт перестанет работать — потребуется обновление селекторов
Если сайт блокирует window.open, потребуется другой подход (например, переход через location.href)

Варианты и альтернативные подходы

Использовать CSS-injection для перманентной правки стилей
Расширение браузера взамен userscript — если нужны более глубокие интеграции
Локальное прокси/переопределение контента — более сложный, но мощный вариант для офлайн-правок

Часто задаваемые вопросы

Можно ли распространять userscript другим пользователям?

Да. Вы можете опубликовать скрипт в библиотеке Tampermonkey или на GitHub/Gist. Убедитесь, что код безопасен и сопровождается инструкцией по установке.

Влияет ли скрипт на производительность страницы?

Маленький скрипт заметного влияния не окажет. Но сложные обработки и частые MutationObserver могут замедлить страницу.

Что делать, если кнопка не появляется?

Проверьте селекторы через Inspect Element
Убедитесь, что @match включает текущий URL
Попробуйте использовать MutationObserver и увеличить таймаут ожидания

Inspect Element виджет шаринга

Примеры расширений функциональности

Добавить подсказку с последним выбранным контактом
Сохранять предпочтения позиции кнопки в localStorage и добавить UI для их изменения
Интегрировать счётчики кликов (локальные) для личной аналитики

Итог и рекомендации

Tampermonkey — мощный инструмент для преобразования временных правок из Inspect Element в постоянные локальные улучшения. Начните с простых скриптов, строго ограничьте область действия через @match, проверьте поведение на динамических страницах и уделите внимание безопасности. Регулярно проверяйте и обновляйте скрипты, особенно если целевой сайт изменяет структуру.

Важно

Всегда проверяйте userscript перед установкой
Не используйте скрипты, которые требуют лишних разрешений

Завершение

Если вы хотите, я могу помочь:

Составить userscript под ваш конкретный сайт, если вы пришлёте структуру виджета
Подготовить шаблон с несколькими вариантами вставки кнопки и настройками

Кнопка WhatsApp после вставки