Integrate my Javascript, JQuery and CSS into an existing site

Question

This is a 'best practice' question.

I want to play with the look and feel of a web application that delivers a UI to us. I have no access to the source or server.

I'm doing a, "this could be so much better with a bit of effort," exercise.

So the question for the Stack Overflow community is what is your weapon of choice to to do this?

This isn't a hacking question, I don't want to alter someone else's code I just want to do this within my own browser as a demo.

AFAIK Greasemonkey (or Tampermonkey as Chrome is my preferred browser) would eat this, but may be overkill for what I need (I've never used it and understand that there's a fairly steep learning curve?)

So, here's the simple use-case

If the URL = http://..... insert xxxx.js and yyyy.css before rendering the page in the browser...

What's the best tool for the job for a slacker like me?

Answer 1

greasemonkey is not too hard to learn, most of the coding is simply javascript. tampermonkey is simply an addon for chrome that enables certain greasmonkey-specific coding. (for what you are doing this is probably not required)

should only take a few lines to inject your .js and .css

i believe you actually want your stuff to run after the source page has fully loaded, if run before it will be overwritten by the source when it loads

here is my code that does a simple mod to 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);

hope that helps

this question is also relevant to my interests because i want to @require jquery and just use it within greasemonkey - but the only construct i could get working is the one above which actually downloads the script again with every page load.