Как сделать изменения Inspect Element постоянными с помощью Tampermonkey

Tampermonkey — это менеджер userscript, который позволяет хранить и автоматически применять ваши локальные изменения страницы после её перезагрузки. В статье показано, как установить Tampermonkey, создать userscript и добавить кнопку «Поделиться в WhatsApp» в виджет обмена статьи. Также рассмотрены безопасность, проверка работоспособности, альтернативы и рекомендации на случай проблем.

Введение

Инструмент “Inspect Element” в браузере позволяет временно изменить HTML, CSS и JavaScript страницы. Но все изменения теряются после обновления. Если вам нужно, чтобы правки оставались видимыми локально, вы можете использовать Tampermonkey — расширение, которое запускает ваш скрипт при загрузке нужной страницы и тем самым делает изменения «постоянными» только на вашем компьютере.

В этой статье вы узнаете:

• что такое Tampermonkey и как его установить;
• как написать и запустить базовый userscript для добавления кнопки WhatsApp к виджету обмена;
• как обезопасить скрипты и тестировать их;
• альтернативные подходы и рекомендации по совместимости.

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

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

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

Ключевые возможности:

• автозапуск скрипта при загрузке указанных страниц (@match/@include);
• удобный встроенный редактор и отладчик;
• библиотека готовых userscript-решений;
• возможность включать/отключать отдельные скрипты.

Шаги установки (кратко):

1. Откройте официальный сайт Tampermonkey или магазин расширений вашего браузера. Страница автоматически предложит версию для вашего браузера.
2. Нажмите “Get from Store” (или «Установить» в магазине вашего браузера).
3. Подтвердите установку и следуйте инструкциям.

Если браузер не указан, но он основан на Chromium, обычно можно установить Tampermonkey из магазина Chrome.

Что учитывать перед изменением элементов сайта

Перед запуском userscript проверьте правила и политику сайта. Не запускайте скрипты на страницах с конфиденциальными данными (онлайн-банкинг, формы оплаты, страницы с персональными данными). Скрипт выполняется локально и может логировать или отправлять данные, если он неблагонадёжный.

Рекомендации по безопасности:

• устанавливайте скрипты только из проверенных источников;
• проверьте исходный код перед включением;
• используйте @match или @include, чтобы ограничить область действия скрипта;
• избегайте grant-прав, которых скрипту не нужно;
• не храните в скриптах пароли или токены.

Начало работы с Tampermonkey

Создать скрипт можно через иконку расширения или через панель Tampermonkey.

1. Нажмите иконку расширений → Tampermonkey → Create a new script.
2. Откроется редактор со стандартным шаблоном метаданных.

Типовой заголовок (metadata block):

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
})();

Метаданные указывают Tampermonkey, когда запускать скрипт и какие разрешения нужны. Особое внимание уделите директиве @match — она ограничивает, на каких URL скрипт выполняется.

Пример: добавить кнопку WhatsApp в виджет обмена статьи

Цель: в конце статьи (в существующем виджете обмена) добавлять кнопку, которая открывает окно отправки ссылки через WhatsApp.

Контекст: на страницах MakeUseOf есть общий виджет обмена, в который мы встроим кнопку. В реальном проекте адаптируйте селектор @match и querySelector под целевой сайт.

1. Проанализируйте DOM: откройте Инспектор (Ctrl + Shift + C) и найдите контейнер виджета обмена.

В нашем примере контейнер имеет класс “sharing bottom” и представляет собой div. Мы будем находить его через document.querySelector(‘div.sharing.bottom’).

2. Полный userscript, готовый к вставке в Tampermonkey:

// ==UserScript==
// @name         WhatsApp Share Button for MakeUseOf
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Добавляет кнопку "Поделиться в WhatsApp" в виджет обмена статьи
// @author       You
// @match        https://www.makeuseof.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

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

    // Простое оформление
    whatsappBtn.style.backgroundColor = '#075E54';
    whatsappBtn.style.color = 'white';
    whatsappBtn.style.border = 'none';
    whatsappBtn.style.borderRadius = '5px';
    whatsappBtn.style.padding = '8px 12px';
    whatsappBtn.style.cursor = 'pointer';
    whatsappBtn.style.marginLeft = '8px';
    whatsappBtn.style.fontSize = '14px';

    // Функция генерации ссылки
    function generateWALink() {
        const pageURL = encodeURIComponent(window.location.href);
        const pageTitle = encodeURIComponent(document.title || '');
        // Используем официальный API-схему
        return `https://api.whatsapp.com/send?text=${pageTitle}%20${pageURL}`;
    }

    // По клику открываем ссылку в новой вкладке
    whatsappBtn.addEventListener('click', () => {
        const whatsappURL = generateWALink();
        window.open(whatsappURL, '_blank');
    });

    // Находим контейнер виджета обмена и вставляем кнопку
    function insertButton() {
        const sharingDiv = document.querySelector('div.sharing.bottom');
        if (sharingDiv && !sharingDiv.querySelector('.tm-whatsapp-btn')) {
            whatsappBtn.classList.add('tm-whatsapp-btn');
            sharingDiv.appendChild(whatsappBtn);
        }
    }

    // Вставляем кнопку после загрузки страницы и при динамических изменениях
    insertButton();

    // Если сайт динамически подгружает контент, наблюдаем за DOM
    const observer = new MutationObserver((mutations) => {
        insertButton();
    });

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

})();

3. Сохраните скрипт (Ctrl + S) и обновите страницу. Кнопка должна появиться в виджете обмена. Нажатие откроет окно WhatsApp (или страницу web.whatsapp) с подготовленным сообщением.

Тонкости и улучшения

• Иконка и aria-атрибуты: замените текст на иконку и добавьте aria-label для доступности.
• Место вставки: используйте insertAdjacentElement или insertAfter, чтобы встраивать кнопку в нужное место.
• Локализация: добавьте перевод текста кнопки исходя из языка страницы.
• Отложенная инициализация: если сайт использует ленивую загрузку, запускайте вставку после появления контейнера.

Пример: добавить иконку Font Awesome (если доступна на странице) или использовать SVG прямо в кнопке.

Отладка и тестирование

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

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

Тесты и случаи использования

1. Открыть статью и проверить наличие кнопки.
2. Нажать кнопку и убедиться, что открывается вкладка с https://api.whatsapp.com или web.whatsapp.com и вставленным ссылочным текстом.
3. Проверить на страницах без виджета — скрипт не должен выдавать ошибок в консоли.
4. Отключить userscript в панеле Tampermonkey — кнопка должна исчезнуть.

Автоматические проверки

• убедитесь, что в консоли нет ошибок JavaScript;
• проверить, что селектор целевой зоны не конфликтует с другими скриптами;
• протестировать поведение при отключенном интернет-соединении (скрипт не должен вызывать зависание).

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

1. Greasemonkey (Firefox) и Violentmonkey — аналоги Tampermonkey. Они отличаются UX редактора и политиками запуска, но выполняют те же задачи.
2. Расширения, добавляющие кнопки общего назначения (например, расширение для социальных кнопок), если нужно массовое решение для разных сайтов.
3. Локальные прокси или пользовательский CSS (Stylus) — подойдут, если требуется только изменение стилей, без логики.
4. Браузерная консоль + bookmarklet — быстро для одноразовых правок, но не для постоянных.

Когда Tampermonkey не подходит

• если вы не можете или не хотите устанавливать расширения;
• если сайт запрещает использование сторонних скриптов в своём соглашении (требуется соблюдать правила);
• если нужно распространять изменения среди других пользователей — для этого нужны серверные правки или расширение, распространяемое централизованно.

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

• Chrome / Edge / Opera: Tampermonkey доступен и работает стабильно.
• Firefox: Tampermonkey доступен, но некоторые пользователи предпочитают Greasemonkey.
• Safari: поддержка Tampermonkey ограничена и зависит от версии Safari.

Совет по миграции: если вы планируете перенос скриптов между устройствами, сохраняйте исходники в системе контроля версий (Git) или в отдельной облачной папке и импортируйте в Tampermonkey.

Риски и меры защиты

Риски

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

Меры защиты

• Перед установкой проверить исходный код и искать вызовы к внешним API;
• добавлять директивы @match/@exclude, чтобы скрипт не выполнялся на страницах входа/оплаты;
• для критичных сайтов отключать userscripts вручную;
• периодически пересматривать список активных скриптов.

Рольовые чек-листы

Разработчик

• написать читаемый и документированный код;
• использовать уникальные классы/атрибуты для своих элементов;
• не использовать глобальные переменные;
• покрыть случаи ошибок try/catch и логировать их корректно.

Продвинутый пользователь

• проверить, существует ли готовый скрипт в библиотеке Tampermonkey;
• протестировать скрипт в режиме инкогнито или на отдельном профиле;
• ограничить область действия через @match и @exclude.

Офис безопасности / администратор

• проанализировать скрипт на наличие сетевых вызовов и передачи данных;
• установить правила использования расширений в корпоративной среде.

Мини-методология для создания userscript

1. Сформулируйте цель (что изменить и зачем).
2. Найдите селектор контейнера в DOM.
3. Создайте minimal working script и проверьте в консоли браузера.
4. Перенесите код в Tampermonkey, добавьте метаданные @match и @grant.
5. Тестируйте и добавляйте обработку ошибок и наблюдение за DOM.
6. Документируйте и версионируйте.

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

• добавление aria-label для кнопки;
• выбор между API и прямой картинкой иконки WhatsApp;
• поддержка отправки текста с кратким аннотацией статьи;
• опция уменьшения видимости (иконка только в режиме редактирования).

Мероприятия при инциденте и откат

Если после установки скрипта возникают проблемы:

1. Отключите скрипт в панели Tampermonkey.
2. Проверьте консоль на ошибки и отмените изменения.
3. Восстановите страницу и повторно проверьте функциональность сайта.
4. При необходимости удалите Tampermonkey и перезагрузите браузер.

Краткий глоссарий

• userscript — пользовательский скрипт на JavaScript, который модифицирует поведение страницы.
• @match — директива метаданных, указывающая URL, на которых выполняется скрипт.
• Tampermonkey — менеджер userscript.
• DOM — Document Object Model, структура HTML-документа.

FAQ

Q: Будут ли изменения видны другим пользователям?

A: Нет. Userscript выполняется только в вашем браузере и не меняет исходный сайт.

Q: Можно ли использовать userscript на мобильном браузере?

A: На мобильных браузерах поддержка пользователейcript-менеджеров ограничена. На Android возможны решения с поддержкой расширений, но полноценной работоспособности не гарантируется.

Q: Как быстро отключить все скрипты?

A: Нажмите на иконку Tampermonkey и используйте переключатель “Disable” или откройте панель и выключите все скрипты.

Резюме

• Tampermonkey позволяет сделать локальные изменения страницы постоянными для вашего браузера.
• Создавая userscript, ограничивайте область действия через @match/@exclude и проверяйте исходный код.
• Для большинства задач по изменению интерфейса достаточно базовых знаний JavaScript, HTML и CSS.
• Всегда тестируйте изменения и следите за безопасностью.

Важно

Не устанавливайте скрипты из ненадёжных источников и не выполняйте код, который запрашивает или отправляет ваши личные данные.

Сводка действий для быстрого внедрения

1. Установите Tampermonkey.
2. Создайте новый скрипт и вставьте пример выше.
3. Настройте @match под целевой сайт.
4. Сохраните и протестируйте.

Социальный предпросмотр

OG Title: Добавьте кнопку WhatsApp через Tampermonkey OG Description: Быстрое руководство по созданию userscript для вставки кнопки «Поделиться» в виджет статей. Установка, пример кода, безопасность и тесты.

Короткое объявление (100–200 слов)

Хотите, чтобы изменения, сделанные через Inspect Element, оставались в браузере после перезагрузки? Tampermonkey решит эту задачу. В статье показано, как установить Tampermonkey, создать userscript и добавить кнопку “Поделиться в WhatsApp” в виджет обмена статьи. Вы получите готовый код, рекомендации по безопасности, проверкам и альтернативы. Это практическое руководство поможет быстро автоматизировать частые изменения интерфейса без прав на сервере.