Lxf118 greasemonkey
Greasemonkey. правимо Мережа
Інтернет - чудова штука, але не завжди виглядає належним чином. Джульєтта Кемп і Greasemonkey беруться це виправити.
Ідея, що лежить в основі Greasemonkey. дуже проста. Це розширення Firefox. і воно встановлюється так само, як і всі інші (знайдіть його за допомогою меню Tools> Addons [Інструменти> Додатки] і натисніть Install [Встановити]). Однак саме по собі воно нічого не робить, лише дозволяє виконувати скрипти (ваші або написані іншими користувачами), щоб змінити зовнішній вигляд і поведінку web-сторінок.
Частина 1 Мій перший скрипт Greasemonkey
Щоб максимально спростити написання скрипта, Greasemonkey надає корисний діалог. Відразу після установки Greasemonkey в правому нижньому кутку вікна Firefox на панелі інструментів з'явиться мавпяча мордочка. Натисніть на ній правою кнопкою миші, і відкриється меню, де буде пункт Новий скрипт [New User Script]. Виберіть його, і з'явиться діалог, схожий на наведений праворуч.
Поле 'description' містить опис дій скрипта. Завжди заповнюйте його, навіть для власних скриптів - їх може накопичитися багато, і якщо залишити інформацію про те, що робить кожен сценарій, ними буде простіше управляти.
У правилах включення можна використовувати синтаксис Magic TLD.tld. який буде відповідати будь-якому домену верхнього рівня (включаючи домени другого рівня типу .co.uk і т.д.). Наприклад, example.tld відповідає example.com, example.co.uk, example.org і цілого набору інших доменів. Однак з міркувань безпеки цей синтаксис не варто використовувати, якщо скрипт працює з особистими даними.
Файл виглядає приблизно так:
Пора написати сам сценарій. Він лише змінює колір фону всіх сторінок в домені include на білий. (Буває, що кольору фону і справді не виглядають.) Для сторінок без фреймів або інших ускладнень це робиться за все одним рядком:
document - це вбудований спосіб посилання на поточну сторінку. Це об'єкт DOM (Document Object Model - об'єктна модель документа), який представляє весь HTML-документ. Уявіть його собі як дерево HTML-елементів (об'єктів). Кожен новий елемент є «дочірнім» по відношенню до попереднього (подивіться на схему, яка зображує можливу структуру тіла HTML-документа).
У цій моделі для посилання на об'єкт використовується нотація головний об'ект.потомок.потомкпотомка. Таким чином, спочатку йде елемент body. потім стиль елемента body і, нарешті, атрибут background стилю елемента body. Даний атрибут встановлюється в білий колір (#ffffff - позначення білого кольору в шістнадцятковій запису; це один із стандартів HTML. Можна було б використовувати і просто white)
Greasemonkey включається і відключається клацанням лівою кнопкою миші на його значку. Можна відключити його, подивитися, як виглядає сторінка, потім ввімкнути чи перезавантажити сторінку і побачити, що робить скрипт.
Частина 2 Задамо стилі CSS
Як було показано на схемі DOM, «дочірнім» елементом HTML-елемента є той, який в ньому міститься. Уявіть собі документ у вигляді великого дерева, кожен відкриває тег якого (наприклад,
) Починає нову гілку, а кожен закриває (наприклад,
) Закінчує її. Самозакриваються теги (наприклад,) Утворюють гілку, у якій не може бути дочірніх. Таким чином, пошук можна обмежити всередині заданого абзацу або блоку div.
Перша функція (addCss) задає спосіб додавання глобальної таблиці стилів CSS. document знову-таки посилається на поточну сторінку, але в цьому прикладі ми використовуємо функцію getElementsByTagName ( «отримати елементи на ім'я тега» - саме це вона і робить) для вибору першого елемента head. Для тих, хто зовсім не знайомий з CSS: стилі задаються [в тому числі] в секції head HTML-файлу, і нам потрібно добути цей елемент, щоб він став батьківським для нового елемента CSS. Тут є рядок, яка відловлює помилкову ситуацію, коли секції head немає (проводиться повернення з функції без будь-яких дій), потім скрипт створює елемент style і встановлює його атрибут type в text / css. В рядку
функція приймає те, що їй передано, і вставляє це в елемент style. Потім повністю створений елемент style додається до елементу head - ось і все.
В останніх рядках відбувається виклик функції з аргументом, що встановлює колір фону - там, де рядок cssString. Зверніть увагу на те, що ми використовуємо дужки (). тому що викликаємо функцію, а не визначаємо її. Прапор! important гарантує, що ваші CSS-стилі перевизначити зазначені на сторінці.
Фактично цей код додає в заголовок HTML-сторінки наступні рядки:
Точно так само можна задати власні стилі CSS для будь-якого елементу сторінки - просто задайте відповідну CSS-рядок, яка буде передана функції addCss. Наприклад, виклик
встановить колір фону в білий, весь текст зробить чорним і вирівняє його по ширині.
Частина 3 Змінимо задані елементи
Отже, ми навчилися змінювати стиль одного елемента, переробивши об'єкт DOM, або безліч стилів, додаючи власні CSS-записи, і можемо застосувати це до заданих сайтам за допомогою правил включення / виключення Greasemonkey. А якщо нам потрібно знайти елементи певного типу, що зустрічаються на сторінці кілька разів, і змінити їх?
Четвертий параметр задає спосіб повернення результатів. Варіант, вказаний тут, відповідає довільному порядку, що найчастіше і потрібно. Якщо результати потрібно повернути в порядку їх появи на сторінці, використовуйте замість нього XPathResult.ORDERED_NODE_SNAPSHOT_TYPE. Останній параметр дозволяє об'єднати результати запиту - передайте туди результат попереднього виклику document.evaluate. і отримаєте їх назад разом. Експериментуйте з цим!
Запит XPath (перший параметр) - «мотор» цієї функції. XPath - потужна мова запитів для XML-документів, вбудований в Firefox [і не тільки, - прим. ред. ], І його можна використовувати в Greasemonkey. Якщо ви шукаєте певний набір елементів, можна просто пройтися по дереву DOM, вивудити набори вузлів і знайти в них шукане. Але це досить повільно і не дуже красиво з точки зору коду. XPath дозволяє знайти на сторінці все, що потрібно, набагато швидше і елегантніше. Я скористаюся ним в декількох скриптах, і, сподіваюся, це допоможе вам зрозуміти, як він працює - якщо хочете дізнатися про нього докладніше, пошукайте специфікацію або онлайн-підручники в Інтернеті. Мова справді дуже гнучкий: якщо ви можете визначити набір результатів, який хочете отримати з HTML-документа, то зможете і написати XPath-запит, який дозволить їх отримати.
Повернемося до нашого скрипту: картинки ми добули, і хочемо з ними щось зробити. Ось наступний фрагмент коду: допишіть його відразу після наведеного вище:
snapshotLength і snapshotItem - методи, що працюють з результатом виклику document.evaluate і повертають відповідно загальне число результатів і заданий результат по його номеру. Вставте обидва в цикл for. як у наведеному прикладі, і обробіть кожен елемент (тут - кожне зображення зі сторінки) результату запиту XPath.
Спочатку в Greasemonkey було кілька серйозних дірок в безпеці, викликаних способом впровадження користувача скриптів безпосередньо в web-сторінки: так ваші сценарії виявлялися доступні для сайтів сторінок зловмисників. Нині Greasemonkey працює по-іншому, насправді виконуючи скрипти в «пісочниці» і використовуючи обгортки для доступу до об'єктів на віддаленій web-сторінці, яку хочуть змінити ваші скрипти.
Через особливості реалізації безпеки в скриптах Greasemonkey такий спосіб працювати не буде. Доводиться йти окружним шляхом.
thisImg.src дає нам значення атрибута src зображення. Так, для тега
Частина 4 Заміна тексту
Тепер спробуємо замінити текст, який зустрічається на сторінці в декількох місцях. Припустимо, вас дістало слово «аутсорсинг» [outsourcing], тут і там маячить на головній сторінці сайту вашої компанії, куди вам, на жаль, доводиться заходити регулярно. Замінимо його словом «лівак» [otherguy] (або будь-яким іншим, яке ви знаходите жартівливим, а не нудним).
Перший фрагмент коду ми вже бачили в попередньому скрипті. Він шукає в документі все текстові вузли. Далі ми задаємо регулярний вираз. Конструктор new RegExp () приймає два аргументи. Перший - це шукана стрічка, другий - модифікатори. g означає глобальне відповідність: замінюються всі входження рядка, а не тільки перше. (Найчастіше вам це і потрібно.) I означає порівняння без урахування регістру.
Є і модифікатор m для багаторядкового режиму, в якому якоря ^ і $ (означають початок і кінець рядка, відповідно) збігаються з позиціями перед і після перекладу рядка, а не тільки з початком і кінцем тексту.
Нарешті, черговий цикл for проходить по результату запиту XPath. знаходячи нашу рядок і замінюючи її іншою. Легко!
Greasemonkey здатний на набагато більше - просто поекспериментуйте і побачите, що вийде. Підстройте Інтернет під себе! LXF
радості налагодження
В ідеальному світі все, що б ви не написали, відразу запрацює так, як задумано. Успіхів!
Тим, у кого відразу не вийшло, допоможуть деякі засоби налагодження: