Автор оригинала: FreeCodeCamp Community Member.
Томас Ное
Написание пользователей – это забавный способ использовать ваши навыки JavaScript. Он выводит вас из редактора в браузер с обратной связью и валидацией в реальном времени.
Что такое пользовательский скрипт?
Пользовательские сценарии записываются в JavaScript и позволяют вам настроить внешний вид веб-страницы в вашем браузере. Сценарии влияют только на ваш браузер, а не фактическую веб-страницу.
Быстрое предупреждение
Объяснения, взятые из https://github.com/Openuserjs/Openuserjs.org/wiki/userscript-beginners-howto.
Почему пользовательские сценарии?
Бесплатный кодовый лагерь имеет много отличных реальных мировых проектов, которые обогащают ваш набор навыков и портфель. Я лично люблю использовать навыки, которые я узнал в JavaScript, jQuery и CSS, чтобы изменить мой день в день просмотра.
Некоторые пользовательские сценарии были чрезвычайно популярны и были внесены в расширения браузера. Пример одного будет найден для улучшения Reddit в http://redditenhancementsuite.com/ Отказ
Вы тоже можете использовать свой пользовательский скрипт в качестве основы расширения браузера!
Начиная
Пользовательские скрипты запускаются от самих расширений браузера. Смазка обезьяна (Firefox) была пионер, чтобы позволить людям настроить свой опыт просмотра. Установите соответствующий подключаемый для вашего браузера.
Для Firefox: Грязная обезьяна
Greasemonkey Канал развития позволяет проверить экспериментальную новую версию этого дополнения, прежде чем она будет выпущена в общее … addons.mozilla.org.
Для хрома: Гастрома
Tampermonkey Самый популярный менеджер пользователей для браузеров на основе мигания Chrome.Google.com.
Для этого учебника я буду использовать Chrome с обезьяной Tamper.
Не должно быть никаких существенных различий с процессом после установки либо обезьяны для смазки, либо обезьяна.
На всякий случай, вот быстрое ссылка для установки смазки обезьяны (а также с ней несколько вещей.)
Greasemoskey Учебник для начинающих В руководстве Greaseminkey я охватил, как написать пользовательские сценарии Greasemonkey. После этого учебника вы сможете … HayaGeek.com.
проект
Мы собираемся сделать небольшое изменение на домашнюю страницу на Hacker News http://news.ycombinator.com Отказ
Мы будем использовать jQuery, чтобы сделать переменные ссылки фоновых цветов немного отличаться для повышения читаемости.
начать новый скрипт
Нажмите на значок обезьяны Tamper в правом верхнем углу и выберите « » Добавьте новый сценарий ‘ из диалогового окна.
Вы должны быть доставлены на новую вкладку, которая выглядит так
Заполните информацию
После запуска нового скрипта первое, что мы хотим сделать, это заполнить информацию скрипта в верхней части. Продолжай и заполните следующие атрибуты, как вы хотите
- название
- описание
- автор
Я покажу тебе то, что мой выглядит как хорошо.
Добавить jQuery
прямо до линии
// ==/UserScript==
Добавьте строку с текстом
// @require http://code.jquery.com/jquery-latest.js
Подумайте об этом как о импорте/требовании JQuery для проекта JS.
Вот мой
Привет Script.js!
Посмотрим, наш сценарий нагрузки на http://news.ycombinator.com И jQuery – это хорошо, чтобы пойти.
После// Ваш код здесь линия добавить следующий код
$(document).ready(function() { alert('WINNING');});и введите Ctrl + S или нажмите кнопку Сохранить слева
Вы можете быть доведены на следующую страницу. Если нет, щелкните на вкладке Установленные UnderyPripts.
Потрясающие! Сценарий загружен в обезьяну тампера. Зеленая точка слева означает, что скрипт включен. Вы даже можете увидеть логотип Hacker News на скриншоте.
Выполнить скрипт
Посетить Хакеров Новости в вашем браузере, и если вы следуете, и все прошло хорошо, вы должны увидеть
Выстрелить отладчик
Пришло время найти элементы Post, которые мы хотим изменить. Введите Ctrl + Shift + I Чтобы поднять браузер отладчик.
Теперь мы хотим выбрать элемент, чтобы приблизить. Нажав на синий квадрат с помощью мыши в нем в левом верхнем углу отладчика, откроет селектор элемента. Вы также можете использовать команду ключа Ctrl + Shift + C Отказ
Как вы можете видеть, я нашел элемент под названием TD.title Отказ После нажатия на него элемент выделен на вкладке «Элементы отладчика» (также показано выше.)
Выделение элемента выше нашего названного названия
Выбирает это в браузере
Бинго. Похоже, мы нашли элемент, который мы хотим. Hacker News имеет чистый HTML-макет, поэтому было неплохой сложно найти наш целевой элемент.
Если вы помните свой jQuery, все, что вам нужно сделать, чтобы найти все элементы Post, используют селектор
$('.athing')сделать что-нибудь в нашему элементу
Теперь, когда у нас есть способ выбрать наш элемент с jQuery, мы можем изменить наш элемент. Изменим цвет фона постов, используя следующий код. Измените код $ (документ). Седи () к этому
$(document).ready(function() { $('.athing').css('background-color', '#DDD');});Примечание: #ddd – это сокращение для #ddddddd;
Давайте посмотрим на полученную страницу. Не забудьте сохранить свой поставщик, затем обновите страницу Hackernews. Возможно, вам придется закрыть отладчик, чтобы просмотреть всю страницу.
Мы уже сделали? Не совсем. Мы изменили все наши наши элементы вместо чередующихся. Это может выглядеть как эффект зебра, который мы хотели, но это только потому, что элемент SCARCE/SUBINFO не влияет. Если вы чувствуете склонны изменить этот элемент, пожалуйста, сделайте и не стесняйтесь публиковать свой метод в комментариях. Это снаружи объема этого руководства.
О нет?! Что мы делаем … Я не хочу писать какие-либо петли!
jquery к спасению
Нет страха, партерщиков. jQuery пришел в спасение еще раз.
jQuery предоставляет специальные селекторы только для этого, как это.
Теперь представляем :странный
: нечеткий селектор Описание: Выбирает нечетные элементы, нулевые индексируемые. Смотри также даже. В частности, обратите внимание, что на основе 0 означает индексирование на основе 0 … api.jquery.com.
Все, что нам нужно сделать, это добавить Нечетное до конца нашего селектора, чтобы линия выглядела так. Примечание: я также изменил цвет на #eee; в сочетании к лучшему.
$('.athing:odd').css('background-color', '#EEE');Сохраните свой скрипт и обновить Hackernews, и вы должны увидеть этот конечный продукт
Обертывание
Там у вас есть. Теперь у вас есть еще один творческий розетки, чтобы развязать вашу почковую кодировку во время! Пользовательские скрипты можно использовать для настройки функциональности или просмотра сайта, чтобы добавить функцию, которую вы всегда хотели, а также гораздо больше.
Домашнее задание
Напишите свой собственный пользовательский скрипт, чтобы добавить что-то на сайт, который вы используете часто. Будь то стиль или кнопка, которая может переключить видимость определенных элементов, это все зависит от вас. Предоставьте свой продукт в комментариях здесь!
Идите и покоряют туристы!
Больше чтения
Tampermonkey Tampermonkey – это бесплатное расширение браузера и самый популярный менеджер по пользователю для браузеров на основе мигания, как Chrome … Tampermonkey.net Greasespot Wiki Greasespot – это сообщественная документация для сценариев пользователей с Greasemoskey. wiki.greasespot.net Greasy Fork – безопасные и полезные пользовательские сценарии Пользовательские сценарии введите вас в управление опытом просмотра. После установки они автоматически делают сайты … greasyfork.org Начало работы: Создание расширения Chrome Расширения позволяют добавлять функциональность в Chrome без глубокого погружения в нативный код. Вы можете создать новый … developer.Chrome.com Как развить расширение Firefox Этот пост блога очень устарел. Если вы хотите более позднее руководство по разработке расширения, пожалуйста, прочитайте новые, как … blog.mozilla.org.