Home-theater-designers
Функция «Проверка элемента» в вашем веб-браузере — это инструмент разработчика, который позволяет вам изменять интерфейсные аспекты веб-сайта, включая HTML, CSS и JavaScript, а также вносить временные изменения. Вы также можете сделать гораздо больше с помощью Inspect Element. Однако все изменения теряются после обновления.
МУО Видео дня ПРОКРУТИТЕ, ЧТОБЫ ПРОДОЛЖИТЬ С СОДЕРЖАНИЕМ
Но иногда вам может потребоваться сохранить изменения в течение длительного периода или добавить дополнительные функции для улучшения пользовательского опыта. Один из способов сделать изменения Inspect Element постоянными — использовать расширение Tampermonkey. Он позволяет добавлять собственные сценарии на веб-страницы, делая изменения постоянными на вашем локальном компьютере.
Давайте посмотрим, как использовать Tampermonkey, чтобы сделать изменения элемента проверки постоянными в вашем локальном браузере.
Что такое Tampermonkey и как его установить?
Tampermonkey, менеджер пользовательских сценариев, — это популярное расширение для браузера, доступное для всех основных веб-браузеров, включая Chrome, Edge, Opera Next и Firefox. Он позволяет создавать и запускать собственные и существующие пользовательские сценарии для изменения веб-страниц с целью их исправления или улучшения.
Он также включает библиотеку пользовательских скриптов, созданную другими пользователями Tampermonkey. Например, вы можете использовать пользовательский скрипт Local YouTube Downloader, чтобы загружать видео с YouTube с помощью Tampermonkey или смотреть помеченные видео YouTube без входа в систему .
Расширение запускает сохраненные пользовательские сценарии сразу после загрузки указанной веб-страницы, благодаря чему предполагаемые изменения кажутся постоянными.
Прежде чем мы начнем писать скрипт, вам необходимо установить Tampermonkey. Итак, начнем с установки расширения:
- Перейти к Официальная страница Tampermonkey . Он автоматически обнаружит ваш веб-браузер. Если нет, нажмите любую вкладку Chrome, Microsoft Edge, Firefox, Safari и Opera, в зависимости от используемого вами браузера.
- в Скачать раздел, нажмите на Получить из магазина . Вы будете перенаправлены в интернет-магазин вашего браузера.
- Нажмите на Установить чтобы добавить расширение в ваш браузер. Следуйте инструкциям на экране для завершения установки.
Если вашего браузера нет в списке, но вы используете браузер Chromium, вы сможете установить это расширение с сайта Магазин Chrome .
что делает режим низкого заряда батареи
После установки вы можете начать писать собственные пользовательские скрипты с использованием JavaScript, чтобы внести необходимые изменения в любой веб-сайт. Излишне говорить, что вам понадобятся базовые знания HTML, CSS и JavaScript, чтобы написать пользовательский скрипт и внести изменения с помощью Tampermonkey.
Чтобы продемонстрировать возможности Tampermonkey, мы напишем скрипт, который добавит кнопку «Поделиться» в WhatsApp, чтобы делиться ссылками на статьи с вашими контактами в WhatsApp.
Что следует учитывать перед внесением изменений в элементы веб-сайта
При внесении изменений в любой веб-сайт важно соблюдать их политику использования сторонних JavaScript-файлов. Не пытайтесь произвольно запускать пользовательские скрипты на каком-либо веб-сайте, особенно если вы имеете дело с конфиденциальными данными.
Хотя Tampermonkey помогает вам изменить внешний вид и добавить функциональность веб-сайту, все изменения видны только локально в вашем браузере и не влияют на исходный код.
Начало работы с Tampermonkey
После того, как вы запланировали изменения, которые хотите внести в веб-страницу, вы можете приступить к написанию сценария. Новые пользовательские скрипты можно создавать с панели инструментов или панели инструментов Tampermonkey.
Чтобы создать новый скрипт, нажмите кнопку Расширения на панели инструментов браузера и выберите Тампермонки . Далее выберите Создать новый скрипт . Откроется редактор сценариев на панели управления Tampermonkey.
Заголовок Tampermonkey по умолчанию или комментарии к метаданным выглядят следующим образом:
// ==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, когда следует выполнить сценарий.
В этом руководстве мы сосредоточимся на @соответствовать директива, также известная как файл метаданных. Tampermonkey использует эту директиву, чтобы гарантировать, что пользовательский скрипт применяется только к определенному веб-сайту или веб-страницам. В этом случае следующий пользовательский скрипт будет работать только на сайте example.com (замените URL-адрес веб-сайта в соответствии с вашими требованиями) и на всех его страницах.
Написание пользовательского скрипта для добавления кнопки «Поделиться» в WhatsApp
В конце каждой статьи MakeUseOf вы найдете виджет обмена для различных платформ социальных сетей, кроме WhatsApp. Хотя вы можете скопировать и вставить URL-адрес, кнопка «Поделиться» в WhatsApp будет полезна, если вы часто делитесь статьями в своей группе WhatsApp.
Вы можете создать пользовательский скрипт в Tampermonkey, чтобы добавить кнопку «Поделиться» в WhatsApp в конце статьи. Мы интегрируем кнопку в существующий виджет общего доступа, который позволит вам поделиться URL-адресом веб-страницы с вашими контактами в WhatsApp.
mbr или gpt для второго жесткого диска
Давайте начнем с создания базовой кнопки «Поделиться» в WhatsApp.
//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';Теперь, когда у нас есть базовая кнопка «Поделиться» в WhatsApp, давайте добавим к ней немного стиля. Это придаст кнопке цвет фона и текста, границу, отступы и стиль курсора. Немного повозившись, вы можете изменить свойства кнопок, чтобы точно настроить внешний вид.
//add styling to the button
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';
Когда кнопка готова, пришло время ее протестировать. Но куда вы его поместите? Как правило, кнопку «Поделиться» размещают в конце статьи.
Однако в данном случае у нас уже есть виджет обмена в конце каждой статьи. Поэтому идеально было бы сделать эту кнопку «Поделиться» частью виджета.
Для этого мы проверим существующий виджет общего доступа, чтобы найти родительский контейнер, содержащий элементы общего доступа, и найти его в пользовательском скрипте. На веб-странице нажмите Ctrl + Shift + С чтобы открыть «Проверить элемент». Затем выберите элемент виджета общего доступа на странице, чтобы проверить его.
Вы увидите, что это <дел> элемент с именем класса « делюсь дном ». Выбрать этот элемент можно с помощью кнопки запросселектор метод в вашем пользовательском скрипте.
const sharingDiv = document.querySelector ('div.sharing.bottom');После выбора элемента давайте вставим кнопку «Поделиться» в качестве дочернего элемента:
мой жесткий диск не отображается
if (sharingDiv) {
sharingDiv.appendChild(Whatsapp_btn);
}Нажимать Ctrl + С чтобы сохранить сценарий. Если вы перезагрузите страницу, вы увидите кнопку «Поделиться», вставленную в существующий виджет «Поделиться». Но нажатие на него ничего не даст.
Чтобы кнопка работала, мы создадим функцию для генерации URL-адреса общего доступа WhatsApp на основе URL-адреса текущей страницы. Вы можете использовать location.href для возврата URL-адреса страницы.
function generateWALink() {
const pageURL = encodeURIComponent(window.location.href);
return `https://api.whatsapp.com/send?text=${pageURL}`;
}Далее добавим к кнопке прослушиватель событий. При нажатии браузер откроет новую вкладку со ссылкой на общий доступ в WhatsApp, которая позволит вам написать сообщение.
Whatsapp_btn.addEventListener('click', () => {
const whatsappURL = generateWALink();
window.open(whatsappURL, '_blank');
});Сохраните и запустите пользовательский скрипт
Когда у вас будет готов пользовательский скрипт, нажмите Ctrl + С чтобы сохранить изменения. Открой Установленные пользовательские скрипты вкладка в Tampermonkey, чтобы просмотреть все пользовательские скрипты, установленные в вашем браузере.
Чтобы увидеть пользовательский скрипт в действии, откройте целевую веб-страницу. Вы увидите зеленый Делиться кнопка. Нажатие на кнопку предложит вам открыть рабочий стол WhatsApp, если у вас установлено приложение. Затем вы можете выбрать контакт из списка, чтобы отправить ссылку на статью.
Вы можете дополнительно изменить сценарий, добавив дополнительные улучшения. Например, вы можете отобразить значок WhatsApp на кнопке или изменить его расположение с помощью функции InsertAfter().
Вы можете включать, отключать или редактировать отдельные пользовательские скрипты на панели управления Tampermonkey. Либо щелкните значок Tampermonkey на панели инструментов, чтобы одновременно отключить все активные пользовательские скрипты.
Как сделать изменения элемента проверки постоянными с помощью Tampermonkey
Tampermonkey — один из многих доступных менеджеров пользовательских сценариев, которые позволяют вам изменять веб-страницы для улучшения вашего просмотра. Небольшие изменения могут помочь улучшить доступность и устранить мелкие неприятности на вашем любимом веб-сайте.
Прежде чем приступить к написанию скрипта, проверьте, существует ли уже скрипт от других пользователей. Однако будьте осторожны при установке сторонних пользовательских скриптов из неизвестных источников, чтобы избежать вредоносного кода.