Добавляем свой JS на чужой сайт


Добавляем свой JS на чужой сайт

Сообщение k0ttee »

Дамы и господа, вашему вниманию - басня! Обезьяна и браузер. :-)

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

Чтоб подцеплять к чужому сайту свой код надо поставить расширение. В зависимости от браузера зоопарк мартышек будет немного отличаться названиями:

Код: Выделить всё
Для Chrome - TamperMonkey
Для Firefox - GreaseMonkey
Для Opera - ViolentMonkey

Чур ставить из официальных источников расширений, иначе рискуете поставить себе вирусню.

Теперь давайте обезьянничать на страницах RuSeo! :-D

В панели браузера появится мартышка. Тыком в нее можно включать/выключать её (быстро и удобно).
снимок21.png
снимок21.png (1.19 КБ) Просмотров: 14526

Первым делом зайдем в настройки.
file.png
file.png (10.07 КБ) Просмотров: 12595

Будет удобнее писать код во внешнем редакторе (кнопка выбора есть), но я буду показывать на промере встроенного.
file_2.png
file_2.png (50.61 КБ) Просмотров: 12595

Нус, начнем портить! :dance: Создаем скрипт.
file_3.png
file_3.png (9.95 КБ) Просмотров: 12595

Далее надо заполнить обязательные поля, иначе дальше не пустят. Их потом можно будет изменить, если что.
file_4.png
file_4.png (29.87 КБ) Просмотров: 12595

Получаем наконец окно с кодом...
file_5.png
file_5.png (26.93 КБ) Просмотров: 12595

Выпиливаем все это нафиг...
Теперь даю строки кода (их вставляем в начале), ну и прокомментирую
Код: Выделить всё
// ==UserScript==
// @name      ruseo
// @namespace ruseo
// @include   http://ruseo.net/*
// @include   http://*.ruseo.net/*
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @resource  my_img http://site.ru/img.png
// @resource  my_text http://site.ru/my_text.txt
// ==/UserScript==

0.) начало пользовательского скрипта
1.) имя
2.) адресное пространство
3.) где подключать (весь домен ruseo.net). Можно по маске отфильтровать нужные типы страниц, на которых надо выполнять скрипт (пример site.ru/*.html).
4.) где подключать (все поддомены ruseo.net). Тоже фильтруемо, ну или тупо списком перечислить нужные страницы (еще пример site.ru/*.php).
5.) подключение jQuery (на случай если на сайте его не подключили до наших обезьянств)
6.) в переменную my_img подгружается картинка по адресу site.ru/img.png (подгружать можно и из своего компа, только вместо http:// надо писать file://)
7.) те же яйца, только с текстовым файлом (да и сам код можно подгружать из интернета, а не держать внутри плагина - так можно делиться своими напильниками)
8.) конец пользовательского скрипта

Теперь вставляем конструкцию:
Код: Выделить всё
$(document).ready(function(){
var $=window.jQuery;
//тут писать свой код
});

Манипуляция с символом бакса нужна чтобы jQuery работало. Причем window не даст вмешиваться в уже существующий JS, что избавляет от конфликтов. А еще - кроссбраузерно.
Есть и другие варианты, но они работают не кроссбраузерно.

А документ-реди, чтобы код исполнялся не ранее чем после полной загрузки страницы в браузер.

Все дальнейшие кусочки кода вставлять в место для "своего кода".
Осталась пара тонкостей подключения своих картинок и текстов.
Код: Выделить всё
/* обращаться к картинке из внешнего источника (не залитой на RuSeo), можно примерно так */
$("#id").append('<img src="'+GM_getResourceURL("my_img")+'">');
/* а к текстовым файлам примерно так */
$("#id").append('<p>'+GM_getResourceURL("my_text")+'</p>');

Непривычной фигней будет GM_getResourceURL("переменная"), а в остальном - обычный такой JS. И не забывайте подключать внешние тексты или картинки в шапке. Маленькие картинки можно засунуть прямо в текст скрипта, если скукожить их в base64. Тексты, в принципе, тоже можно держать внутри кода.

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

Сбор на вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
ltc: LTsZ8f261j5qS5QUjn7ihzr37hziTvXeA4
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 12040
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 7.05
Re: Добавляем свой JS на чужой сайт

Сообщение birds »

k0ttee, и что в конечном итоге получилось? Я так и не понял нафига козе баян :lol:
Аватара пользователя
birds
Администратор
 
Группа: Специалист ruSEO
Сообщения: 20672
Рефералы: -208
Зарегистрирован: 24 авг 2010
Откуда: местный житель
Средств на руках: -7.42
Статус: летящий вперед
Спонсор
 
Re: Добавляем свой JS на чужой сайт

Сообщение Aman »

Как я понял, котэ хочет изменять дизайн на других сайтах, без взлма - только ему чтоб так отображалось.
Насколько я помню, такое делалось одним расширением к опере и в хроме было.
Это типа при заходе на сайт он сохраняет изменения, и таким образом можно рекламу отключать и всякие ненужный мусор, цвет сайта изменить и кароче полностью его поменять.
Аватара пользователя
Aman

 
Группа: Специалист ruSEO
Сообщения: 4360
Зарегистрирован: 13 июл 2011
Откуда: Федерация
Средств на руках: 0.00
Статус: Оптимист
Re: Добавляем свой JS на чужой сайт

Сообщение k0ttee »

что в конечном итоге получилось?

Пока ничего... ()() Я в адресных пространствах заблудился - все функции выполняются даже без вызова. Вот осилю доки, тогда будет.
нафига козе баян

Так ведь "хватит это терпеть" же. :lol: Напилить себе любимому "того и так как хочется".
только ему чтоб так отображалось

Да, именно это (и не только это, а гораздо больше).
рекламу отключать и всякие ненужный мусор, цвет сайта изменить

Для этого хватало расширения Stylish и CSS в нем.
полностью его поменять

JS это программирование а не разметка, так что можно "все". Разве что капча малину испортит.

Добавлено спустя 14 часов 22 минуты 10 секунд:
Как минимум, автопереключалку в 1080/720 (или максимально возможное качество) для ютуба, а то когда плейлисты играют не охото руками переключаться (оно собака слетает). На звук этот выбор качества тоже влияет.
Да, у меня все симптомы типичного питерского "небыдла" или болезни "я не такой как все".
Сбор на вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
ltc: LTsZ8f261j5qS5QUjn7ihzr37hziTvXeA4
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 12040
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 7.05
Re: Добавляем свой JS на чужой сайт

Сообщение reds »

Возможно ли как-то обратится к блоку, у которого нет ID, но есть DATA-, вот пример:

Код: Выделить всё
<div class="reply_author">
<a class="author" href="/durov" data-from-id="1">Павел дуров</a>
</div>


К нему нужно добавить заранее подготовленную ссылку, чтобы получилось:

Код: Выделить всё
<a class="author" href="/durov" data-from-id="1">Павел дуров</a> | [color=#0040FF]<a href="http://youtube.com/durov">YouTube</a>[/color]


----------------

Хочу в одном закрытом сообществе рядом с именами комментаторов вставить ссылки на их Youtube-каналы

Добавлено спустя 47 минут 50 секунд:
Оказалось можно выбрать ссылку по href, сижу, пилю скрипт и довольный такой, типа программёр.

Добавлено спустя 1 час 8 минут 44 секунды:
Эх, оказалось, все не так просто как с css, с трудом сделал то, что мне нужно, но когда уже вздохнул с облегчением, обнаружил, что скрипт не действует на содержимое, которое грузится через ajax. То есть, у последних комментаторов поста вк показываются ссылки, а если развернуть старые комментарии, то все они "Голые".

Вот часть кода:

Код: Выделить всё
// ==UserScript==
// @name      VK
// @namespace vk
// @include   https://vk.com/*
// @include   https://*.vk.com/*
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @resource  my_img http://site.ru/img.png
// @resource  my_text http://site.ru/my_text.txt
// ==/UserScript==

$(document).ready(function(){
var $=window.jQuery;
$("a.author[href$='/ihakimov']").append(" &nbsp; <a class=youtube target=_blank href='http://www.youtube.com/channel/UCQxsLDIGrDPPPOPy9q32Luw'>YOUTUBE</a> "); //REDS
$("a.author[href$='/alisichkalis']").append(" &nbsp; <a class=youtube target=_blank href='https://www.youtube.com/c/Alisichkaschannel2015'>YOUTUBE</a>
});


Вот разворачивалка вк:

Код: Выделить всё
<a id="wrh-90926925_4755" class="wr_header" onclick="return wall.showReplies('-90926925_4755', false, false, event);" offs="3/14" href="/wall-90926925_4755?offset=last&amp;f=replies">Показать все 14 комментариев</a>

Пытался создать новый такой же блок кода, но вместо ready вставить (".wr_header").click, но в таком случае при каждом нажатии на кнопку "Развернуть" добавляется новая ссылка туда, где старые, а в развернутом содержании ничего не редактируется.
Аватара пользователя
reds

 
Группа: Специалист ruSEO
Сообщения: 976
Рефералы: -9
Зарегистрирован: 07 окт 2013
Средств на руках: 113.76
Статус: Блогер
Re: Добавляем свой JS на чужой сайт

Сообщение k0ttee »

reds, шапка поста писалась в 2014 году... Тогда я юзал Linux. А сегодня мне стыдно за рассказ о GreaseMonkey, об этой обязьяне, которая глючит. Сегодня я предложу писать полноценный плагин, а не воевать с красноглазой обезьяной.
Сбор на вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
ltc: LTsZ8f261j5qS5QUjn7ihzr37hziTvXeA4
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 12040
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 7.05
Re: Добавляем свой JS на чужой сайт

Сообщение Alerelfi »

k0ttee писал(а): Сегодня я предложу писать полноценный плагин, а не воевать с красноглазой обезьяной.

А можно поподробнее здесь. Что подразумевается под полноценным плагином?
Alerelfi

 
Группа: Cлучайный прохожий
Сообщения: 1
Зарегистрирован: 13 апр 2018
Средств на руках: 0.65
Статус: не указан
Re: Добавляем свой JS на чужой сайт

Сообщение k0ttee »

Что подразумевается под полноценным плагином?

Написать полностью свой плагин, а не пихать свой код в Greasemonkey.
Сбор на вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
ltc: LTsZ8f261j5qS5QUjn7ihzr37hziTvXeA4
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 12040
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 7.05

Вернуться в Железо и софт

 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 22

cron