Создание пользовательских скриптов TamperMonkey | Расширенный просмотр

• Веб-браузеры отображают веб-страницы, загруженные с веб-сервера.  

• Основные компоненты веб-страницы: HTML, CSS и JavaScript.  

• JavaScript используется для интерактивности веб-сайтов.  

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

• User Script Manager позволяет управлять пользовательскими сценариями.  

• Пользовательские сценарии изменяют веб-страницы с помощью JavaScript.  

• Популярные менеджеры пользовательских сценариев: Grease Monkey и TamperMonkey.  

• TamperMonkey работает в Firefox, Chrome, Edge, Opera и Safari.  

• Установка TamperMonkey через официальный сайт.  

• TamperMonkey предоставляет значок расширения в браузере.  

• Поиск и установка пользовательских скриптов через TamperMonkey.  

• Пример использования расширения для GitHub.  

• Расширение увеличивает ширину страниц репозиториев.  

• Установка и тестирование расширения.  

• Создание пользовательского скрипта для сайта CodeChef.  

• Проблема копирования ввода-вывода для тестирования кода.  

• Решение: создание кнопки "Копировать в буфер обмена" с помощью TamperMonkey.  

• Создание нового пользовательского скрипта в TamperMonkey.  

• Настройка URL-адресов для запуска скрипта.  

• Тестирование скрипта с помощью команды alert.  

• Использование консоли разработчика для поиска HTML-элементов.  

• Определение предварительных тегов для примеров ввода-вывода.  

• Подготовка к написанию JavaScript-кода для поиска нужных элементов.  

• DOM означает объектную модель документа.  

• Веб-браузер генерирует объект, представляющий HTML-документ.  

• HTML-элементы в DOM являются объектами JavaScript.  

• Консоль JavaScript позволяет работать с DOM.  

• Можно использовать методы для доступа к элементам HTML.  

• Поиск элементов возможен по атрибутам ID, классам или CSS-селекторам.  

• Можно найти элементы по названию тега.  

• Пример: document.querySelector("pre") для поиска элемента с тегом PRE.  

• Пример: получение HTML-объекта коллекции и его элементов.  

• Возможность присвоения имени элементам для удобства.  

• В Google Chrome есть функция "сниппеты" для создания фрагментов кода.  

• Пример создания фрагмента для работы с HTML-элементами.  

• Использование функции createElement для создания новых элементов.  

• Пример создания кнопки и её вставки с помощью insertBefore.  

• Вставка кнопки перед первым дочерним элементом элемента PRE.  

• Добавление разрыва строки перед кнопкой для корректного отображения.  

• Создание временного HTML-элемента для копирования в буфер обмена.  

• Пример функции для копирования текстового содержимого элемента PRE.  

• Демонстрация работы кнопки копирования и вставки текста.  

• Объяснение, почему буква "р" относится к завершенной вещи.  

• Использование функции "последний ребенок" для добавления кнопки.  

• Описание структуры HTML-элемента с кнопкой копирования, разрывом строки и текстом.  

• Создание цикла для копирования текста в буфер обмена.  

• Использование Tampermonkey для автоматизации процесса.  

• Создание функции для добавления кнопки копирования к тегу pre.  

• Использование ключевого слова "let" для объявления переменных.  

• Написание цикла для добавления кнопки к каждому предварительному тегу.  

• Объяснение, почему скрипт запускается до полной загрузки страницы.  

• Использование метода window.addEventListener для ожидания полной загрузки страницы.  

• Добавление кода для запуска функции после полной загрузки страницы.  

• Использование Tampermonkey для изменения CSS веб-страницы.  

• Присвоение кнопке класса для идентификации.  

• Настройка CSS для улучшения внешнего вида кнопки.  

• Создание общедоступной сути на GitHub.  

• Добавление расширения .user.js для обнаружения скрипта в Tampermonkey.  

• Публикация URL-адреса для установки скрипта.  

• Подведение итогов создания пользовательского скрипта Tampermonkey.  

• Призыв делиться впечатлениями и оставлять комментарии.  

• Благодарность за просмотр.