Интегрировать мой Javascript, JQuery и CSS в существующий сайт - PullRequest
0 голосов
/ 30 марта 2012

Это вопрос «наилучшей практики».

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

Я делаю упражнение "это может быть намного лучше, если приложить немного усилий", упражнение.

Итак, вопрос для сообщества Stack Overflow: какое оружие вы выберете для этого?

Это не вопрос хакерства, я не хочу изменять чужой код, я просто хочу сделать это в своем браузере в качестве демонстрации.

AFAIK Greasemonkey (или Tampermonkey, поскольку Chrome - мой предпочтительный браузер) съел бы это, но может быть излишним для того, что мне нужно (я никогда не использовал его и понимаю, что есть довольно крутая кривая обучения?)

Итак, вот простой пример использования

Если URL = http://..... insert xxxx.js and yyyy.css перед отображением страницы в браузере ...

Какой лучший инструмент для работы для бездельника, как я?

Ответы [ 3 ]

2 голосов
/ 30 марта 2012

Используйте Стильный , для более быстрого и легкого манипулирования CSS. Обратите внимание, что вам может потребоваться свободное использование флага !important, но это один из случаев, когда использование этого флага оправдано.

«Сценарии содержимого» (пользовательские скрипты AKA) или Tampermonkey - ваша самая легкая ставка для всего остального (они также могут выполнять CSS). Если вы не используете никаких функций GM_, вы можете пропустить Tampermonkey, пока что.

2 голосов
/ 01 апреля 2012

greasemonkey не слишком сложен в изучении, большая часть кодирования это просто javascript. tampermonkey - это просто аддон для chrome, который включает определенное кодирование для greasmonkey. (для того, что вы делаете, это, вероятно, не требуется)

должно занять всего несколько строк, чтобы вставить ваши .js и .css

Я полагаю, что вы действительно хотите, чтобы ваши материалы запускались после полной загрузки исходной страницы, если они запускаются до того, как они будут перезаписаны источником при загрузке

вот мой код, который делает простой мод для facebook:

var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
script.addEventListener('load', function(){ 
    $ = unsafeWindow['jQuery'];
    $.noConflict();
    // all jQ code goes below here
    // ---------------------------

    function doFont(){
    $('.fbChatTabSelector .numMessages').css('font-size','8px');    // change font smaller on red chat bubble
    $('.fbChatTabSelector .numMessages').css('color','yellow'); // change font color on red chat bubble
    $('.fbJewel .jewelCount').css('color','yellow');        // change font color of red bubble up top (alert jewel)
    }

    window.setTimeout(doFont, 30000);   // wait 30 seconds and apply changes. i only do this because fb loads in chunks and my script executes before the entire page is loaded. you would only need this if your source page loads alot ofstuff with ajax
    //------------------------------------
    // end jQ code
}, false);

надеюсь, что это поможет

этот вопрос также имеет отношение к моим интересам, потому что я хочу @require jquery и просто использовать его в greasemonkey - но единственная конструкция, которую я мог бы получить, - это приведенная выше конструкция, которая фактически загружает скрипт снова при каждой загрузке страницы.

0 голосов
/ 30 марта 2012

Если все, что вам нужно сделать, это играть с CSS и JS, и у вас нет доступа к файлам, вы всегда можете «просмотреть исходный код», скопировать и вставить HTML-код в новый файл и переписать CSS и JS для ваших собственных файлов ...

то есть, если вы делаете это только в демонстрационных целях.

...