Застосування JavaScript: скрипти користувача

Написання користувацького сценарію - це цікавий спосіб використовувати свої навички JavaScript. Він виводить вас із редактора в браузер із зворотним зв'язком і перевіркою в реальному часі.

Що таке скрипт користувача?

Userscripts (ака призначені для користувача скрипти, призначені для користувача скрипти, або .user.js) є відкритими початковими кодами ліцензовані доповнення для веб - браузерів , що зміна веб - сторінок , як вони завантажені. Вони дають користувачам можливість змусити веб-сайти робити те, що вони хочуть, а не те, що спочатку було задумано.

Користувацькі сценарії написані на JavaScript і дозволяють вам змінити зовнішній вигляд веб-сторінки у вашому браузері. Сценарії впливають лише на ваш браузер, а не на фактичну веб-сторінку.

Швидке попередження

Ви повинні знати про проблеми конфіденційності під час використання скриптів користувачів і не повинні встановлювати їх із джерел, яким не довіряєте. Користувальницькі сценарії можуть виконувати дії від вашого імені та потенційно мати доступ до будь-якої інформації на веб-сайті, до якого ви маєте доступ або до якого ви входите на веб-сайт. Їм часто дозволяється виконувати функції, яких сценарії на звичайних веб-сайтах не можуть, наприклад, зберігати інформацію на вашому комп’ютері та обмінюватися нею між веб-сайтами. Погано написані сценарії користувачів потенційно можуть також використовуватися шкідливими веб-сайтами.

пояснення взяті з //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

Чому сценарії користувача?

Free Code Camp має безліч чудових проектів у реальному світі, які збагатять ваш набір навичок та портфоліо. Мені особисто подобається використовувати навички, які я засвоїв у JavaScript, jQuery та CSS, щоб змінити свій щоденний перегляд.

Деякі сценарії користувача були надзвичайно популярними і були перетворені на розширення браузера. Прикладом такого може бути набір Reddit Enhancement Suite, знайдений за адресою //redditenhancementsuite.com/.

Ви також можете використовувати свій скрипт користувача як основу розширення браузера!

Починаємо

Користувацькі сценарії запускаються з самих розширень браузера. Grease Monkey (FireFox) - новатор, який дозволив людям налаштувати свій досвід перегляду. Встановіть відповідний плагін для вашого браузера.

Для FireFox: Жир Мавпа

Greasemonkey

Канал розвитку дозволяє протестувати експериментальну нову версію цього доповнення до того, як він буде випущений для загальної… addons.mozilla.org

Для Chrome: Tamper Monkey

Тампермонкі

Найпопулярніший менеджер скриптів для браузерів на базі Blink chrome.google.com

У цьому підручнику я буду використовувати Chrome із Tamper Monkey.

Після встановлення Grease Monkey або Tamper Monkey не повинно бути суттєвих відмінностей у процесі.

Про всяк випадок, ось коротке посилання на встановлення Grease Monkey (а також створення декількох речей із ним).

Підручник Greasemonkey для початківців

У підручнику Greasemonkey я розповів про те, як писати сценарії користувача Greasemonkey. Після цього підручника ви зможете… hayageek.com

проект

Ми збираємось внести невелику зміну на домашню сторінку Hacker News //news.ycombinator.com.

Ми будемо використовувати jQuery, щоб зробити кольори тла змінних посилань дещо іншими, щоб покращити читабельність.

розпочати новий сценарій

Клацніть на піктограму Tamper Monkey у верхньому правому куті та виберіть у діалоговому вікні " Додати новий сценарій" .

Ви повинні перейти на нову вкладку, яка виглядає так

Заповніть інформацію

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

  • ім'я
  • опис
  • автор

Я покажу вам, як виглядає і моя.

Додайте jQuery

прямо перед лінією

// ==/UserScript==

додати рядок з текстом

// @require //code.jquery.com/jquery-latest.js

Подумайте про це як про імпорт / необхідність jQuery для проекту JS.

ось моя

Привіт script.js!

Давайте подивимось, чи завантажується наш скрипт на //news.ycombinator.com, і jQuery готовий до роботи.

Після рядка // ваш код додайте наступний код

$(document).ready(function() { alert('WINNING');});

і введіть Ctrl + s або натисніть кнопку збереження зліва

Вас можуть перейти на наступну сторінку. Якщо ні, натисніть вкладку Встановлені скрипти користувачів.

Чудово! Вихідний сценарій завантажується в Tamper Monkey. Зелена крапка зліва означає, що сценарій увімкнено. Ви навіть можете побачити логотип Hacker News на скріншоті.

виконати сценарій

Відвідайте Hacker News у своєму браузері, і якщо ви стежите за цим, і все пройшло добре, ви повинні побачити

Запустіть налагоджувач

Настав час знайти елементи публікації, які ми хочемо змінити. Введіть Ctrl + Shift + i, щоб відкрити налагоджувач браузера.

Тепер ми хочемо вибрати елемент, щоб поглянути ближче. Клацнувши на синій квадрат із наведеною мишею у верхньому лівому куті налагоджувача, відкриється селектор елементів. Ви також можете використовувати клавішу Ctrl + Shift + c .

Як бачите, я знайшов елемент, який називається td.title . Після натискання на нього елемент виділяється на вкладці елементів налагоджувача (також показано вище).

Виділення елемента над нашою назвою називається

вибирає це у браузері

Бінго. Схоже, ми знайшли потрібний нам елемент. Hacker News має чистий HTML-макет, тому знайти наш цільовий елемент було не надто складно.

Якщо ви пам’ятаєте свій jQuery, все, що вам потрібно зробити, щоб знайти всі елементи допису, - це скористатися селектором

$('.athing')

зробити щось з нашим елементом повідомлення

Тепер, коли у нас є спосіб вибрати наш елемент за допомогою jQuery, ми можемо змінити наш елемент. Давайте змінимо колір тла публікацій, використовуючи наступний код. Змініть код $ (документ) .ready () на цей

$(document).ready(function() { $('.athing').css('background-color', '#DDD');});

примітка: #DDD - це скорочення для #DDDDDD;

давайте подивимось на отриману сторінку. Не забудьте зберегти свій скрипт користувача, а потім оновити сторінку HackerNews. Можливо, вам доведеться закрити свій налагоджувач, щоб переглянути всю сторінку.

Ми вже закінчили? Не зовсім. Ми змінили всі наші елементи допису замість того, щоб чергувати їх. Це може виглядати як ефект зебри, якого ми хотіли, але це лише тому, що елемент оцінка / субінформація не впливає. Якщо ви схильні також змінювати цей елемент, будь ласка, не соромтеся розміщувати свій метод у коментарях. Це виходить за рамки цього посібника.

О ні?! Що ми робимо ... Я не хочу писати жодних циклів!

jQuery на допомогу

Не бійтеся, товариші кемпери. jQuery знову прийшов на допомогу.

jQuery пропонує спеціальні селектори лише для такого випадку.

Зараз вводимо : непарні

: непарний селектор

Опис: Вибирає непарні елементи з нульовим індексом. Дивіться також навіть. Зокрема, зверніть увагу, що індексація на основі 0 означає… api.jquery.com

все, що нам потрібно зробити, це додати : odd до кінця нашого селектора, щоб рядок виглядав так. примітка: я також змінив колір на #EEE; краще поєднуватися.

 $(‘.athing:odd’).css(‘background-color’, ‘#EEE’);

Збережіть сценарій та оновіть HackerNews, і ви побачите цей кінцевий продукт

Загортання

Ось вам. Тепер у вас є ще одна креативна торгова точка, на якій можна розкрити майбутні майстри кодування! Користувацькі сценарії можна використовувати для налаштування функціональності або вигляду сайту, для додавання функції, яку ви завжди бажали, та багато іншого.

Домашнє завдання

Напишіть власний сценарій користувача, щоб додати щось на веб-сайт, яким ви часто користуєтесь. Буде це стиль або кнопка, яка може перемикати видимість певних елементів, все залежить від вас. Надайте свій товар у коментарях тут!

Ідіть і підкорюйте кемперів!

Більше читання

Тампермонкі

Tampermonkey є вільним розширенням браузера і найпопулярнішим менеджер userscript для Blink-браузерів , таких як Chrome ... tampermonkey.net GreaseSpot Wiki

GreaseSpot - це спільна документація для створення сценаріїв користувачів за допомогою Greasemonkey. wiki.greasespot.net Greasy Fork - безпечні та корисні скрипти користувача

Користувальницькі сценарії дають вам змогу контролювати ваш досвід перегляду. Після встановлення вони автоматично роблять сайти, які ви… greasyfork.org Початок роботи: Створення розширення Chrome

Розширення дозволяють додавати функціональність до Chrome, не заглиблюючись у власний код. Ви можете створити новий… developer.chrome.com Як розробити розширення Firefox

Цей допис у блозі дуже застарів. Якщо ви хочете отримати найновіший посібник з розробки розширень, прочитайте нову інструкцію… blog.mozilla.org