Персонализация веб-страниц с GreaseMonkey

GreaseMonkey - это расширение веб-браузера Mozilla Firefox, которое позволяет пользователям изменять веб-страницы, которые они посетили, во время серфинга в Интернете. Это уникальное программное обеспечение позволяет пользователям персонализировать веб-страницы в соответствии с их предпочтениями, улучшая или удаляя определенные части страницы. Для написания сценариев GreaseMonkey требуется некоторое знание языков сценариев и языков программирования, так как они содержат элементы из Javascript, DOM, HTML, CSS и XPATH. Для тех, кто заинтересован в персонализации веб-страниц с помощью GreaseMonkey, полное руководство по самостоятельной работе можно бесплатно загрузить из Интернета вместе с другими полезными ресурсами.

Что такое GreaseMonkey?

GreaseMonkey - это расширение для Firefox, которое позволяет настраивать веб-страницы, которые вы посещаете на лету.

То есть он изменит страницу прямо в браузере.

Это позволяет по желанию изменять все страницы любого сайта: удалять ненужные элементы, редактировать HTML, добавлять HTML-код, изменять / добавлять / удалять JavaScript, изменять цвета, добавлять функции, увеличивать или уменьшить размер таблиц, форм и т.д ...

Пример 1

Этот скрипт изменит страницы Kioskea для увеличения поля сообщений на форумах.

// Этот скрипт находится в свободном доступе.

// == UserScript ==

// @name KIOSKEA-Forums

// @namespace ВЕБ-САЙТ

// @description Изменить веб-страницы ccm

// @include //ccm.net/*

// @include //www.commentcamarche.com/*

// @include //www.commentcamarche.net/*

// == / UserScript ==

(function () {

// Удаляет все вхождения элементов, чей XPath предоставляется из документа.

// Пример: удалить все таблицы, которые используют CSS-класс «toto»:

// removeElement ("// table [@ class = 'toto']");

функция removeElement (ElementXpath)

{

var alltags = document.evaluate (ElementXpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

для (я = 0; я

{

element = alltags.snapshotItem (i);

element.parentNode.removeChild (элемент); // Удалить этот элемент из его родителя.

}

// Удаляет атрибут из всех вхождений элементов, для которых предоставляется XPath.

// (Все вхождения этих элементов обрабатываются.)

// Пример: удаляем bgcolor из всех

// removeAttributeOfElement ('bgcolor', "// table [@bgcolor]")

// Удалить фиксированную из всех таблиц или ячеек ::

// removeAttributeOfElement ('width', "// table [@width] | // td [@width]")

функция removeAttributeOfElement (attributeName, ElementXpath)

{

var alltags = document.evaluate (ElementXpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

для (я = 0; я

alltags.snapshotItem (я) .removeAttribute (имя_атрибут);

}

// Установить атрибут из всех вхождений элементов в указанное значение.

// Предыдущее значение этого атрибута отбрасывается.

// (Все вхождения этих элементов обрабатываются.)

// Пример: установить до 80 столбцов для всех текстовых областей:

// setAttributeOfElement ('cols', 80, "// textarea")

Функция setAttributeOfElement (attributeName, attributeValue, ElementXpath)

{

var alltags = document.evaluate (ElementXpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

для (я = 0; я

alltags.snapshotItem (i) .setAttribute (attributeName, attributeValue)

}

// Вставить свой собственный CSS в страницу.

// Пример: не подчеркивать ссылку:

// injectCSS ("a {text-ornament: none;}")

функция injectCSS (cssdata)

{

head = document.getElementsByTagName ("head") [0];

style = document.createElement ("style");

style.setAttribute ("type", 'text / css');

style.innerHTML = cssdata;

head.appendChild (стиль);

}

пытаться

{

// Расширение поля сообщения setAttributeOfElement ('lines', '40', "// textarea [@ name = 'message']");

setAttributeOfElement ( 'смещ_по_столбцам', '120', "// текстовое поле [@ имя = 'сообщение']");

// В списке обсуждений мы выделяем жирным шрифтом обсуждение, которое не получило никакого ответа. setAttributeOfElement ( 'стиль', 'начертание шрифта: жирный;', "// тд [текст () = '0'] /../ тд [1] / а");

}

поймать (е)

{

alert («исключение UserScript: \ n» + e);

}

}) ();

Самая важная часть сценария:

 setAttributeOfElement ( 'строки', '40', "// текстовое поле [@ имя = 'сообщение']"); setAttributeOfElement ( 'смещ_по_столбцам', '120', "// текстовое поле [@ имя = 'сообщение']");

Эти две строки изменяют размер (строки, столбцы) текстового поля (текстовой области), используемого для ввода сообщений (определяется как name = "message").

Он использует XPath (/ / textarea ...) для выбора элемента, с которым нужно действовать.

XPath - это способ обозначить определенные элементы HTML-страницы, но его использование не является обязательным.

Вы можете пройти через традиционные методы DOM (.GetElementsByTagName (), а затем выполнить цикл for и т. Д.).

Пример 2

Этот скрипт также содержит эту строку:

 setAttributeOfElement ( 'стиль', 'начертание шрифта: жирный;', "// тд [текст () = '0'] /../ тд [1] / а"); }

В области обсуждения форума это добавит смелые заголовки к обсуждениям, на которые не было дано ответа.

XPath:

- Выберите ячейки таблицы, содержащие текст «0» (td [text () = '0'])

- Вернись на уровень

( / .. )

- Мы продолжаем в первом

и / .. следующие даты на

ячейка (которая содержит заголовок) ( / td [1] )

- Мы выделим жирным шрифтом все ссылки (/ а), содержащиеся в этом

XPath

Некоторые примеры:

- Выберите все изображения: / / img

- Выберите все изображения без границ: / / img [@ border = '0']

- Выберите все ссылки, указывающие на Google: / / a [@ href = '//google.com']

- Выберите Все ссылки на Google и содержат текст «Ссылка на Google: / / a [@ href = '//google.com» и содержит (., «Ссылка на Google»)]

- Выберите все ссылки: / / а

- Выберите только те изображения, которые ссылаются: / / a / img

- Выберите только ссылки, непосредственно размещенные в ячейке таблицы: / / td / a

- Выберите только первую ссылку, размещенную непосредственно в ячейке таблицы: / / td / a [1]

- Выберите только последнюю ссылку, размещенную непосредственно в ячейке таблицы: / / td / a [last ()]

- Выберите все ячейки таблицы, содержащие точный текст «Hello»: / / td [text () = 'Hello']

- Выберите все ячейки таблицы, содержащие (где-то в тексте) слово «Hello»: / / td [содержит (., «Привет»)]

- Выберите все ячейки таблицы, начиная с текста «Hello»: / / td [начинается с (., «Привет»)]

- Выберите все таблицы, содержащие ячейку, содержащую слово «foo»: / / td [содержит (., 'Привет')] /../ .. (Первый / .. обратно в

)

- Выберите все ячейки во втором столбце таблицы: / / tr / td [2]

- Выберите все ячейки в последнем столбце таблиц: / / tr / td [last ()]

- Выберите ячейки в столбцах 1, 2 и 3 таблицы: / / tr / td [position () <= 3]

- Выберите все таблицы с хотя бы одним атрибутом: / / таблица [@ *]

- Выберите все таблицы с атрибутом width: / / table [@ width]

- Выберите все таблицы шириной 400px: / / table [@ width = '400px']

- Выберите все теги, которые являются прямыми дочерями ячейки: / / td / *

- Выберите все ссылки, которые непосредственно связаны с ячейкой: / / td / a

- Выберите вторую ссылку прямого сына ячейки: / / td / a [1]

- Выберите первый тег в ячейке, что это такое: / / td / * [1]

- Выберите первый тег с атрибутом onload: / / td / * [@ onload]

- Выберите тег, являющийся тегом после p в HTML-коде: / / p / follow :: a

- Выберите теги, которые сразу девочек теги p: / / p / a

- Выберите любой тэг, который содержится в тэге ap (независимо от глубины) / / p / Потомок :: а

- Выберите все теги после тега p, но на том же уровне: / / p / follow-sibling :: a

В Firefox вы можете использовать DOM Inspector, чтобы помочь вам найти элементы для выбора (CTRL + SHIFT + I).

Вы также можете использовать расширение для проверки XPath выражений XPath.

коммунальные услуги

Скрипт ccm.user.js содержит 4 класса утилит для облегчения вашей жизни:

removeElement (путь) : удалить элемент со страницы.

removeAttributeOfElement (nomattribut Road) : удалить атрибут элемента.

s etAttributeOfElement (nomattribut, value, path) : добавить или изменить атрибут элемента

injectCSS () : внедрить свой собственный CSS в страницу.

Путь - это путь элемента XPath.

Примеры:

removeElement ()

...

...

Чтобы удалить мусор, это было бы: removeElement ('/ / td / span [@ class =' comment ']');

Чтобы удалить ячейку (td), содержащую этот блабла: removeElement ('/ / td / span [@ class =' comment '] / ..');

Чтобы удалить все комментарии, даже если они не находятся в ячейке таблицы, необходимо выполнить следующее: removeElement ('/ / span [@ class =' comment ']');