Javascript、JQuery、CSSを既存のサイトに統合する

Question

これは「ベストプラクティス」の質問です。

UIを提供するWebアプリケーションのルックアンドフィールで遊びたいです。私はソースまたはサーバーへのアクセス権がありません。

私は、「これはちょっとした努力ではるかに優れているかもしれません」という行為をしています。

スタックオーバーフローコミュニティの質問は、これを行うためのあなたの武器は何ですか？

これはハッキングに関する質問ではありません。私は他の誰かのコードを変更したくないのです。自分のブラウザでデモとしてこれをやりたいだけです。

私の知る限りのGreasemonkey（またはTampermonkey Chromeは私の好みのブラウザであるように）これを食べるだろうが、私は必要なもののためにやり過ぎかもしれ（私はそれを使ったことがないと、かなり急な学習曲線があることを理解できますか？）

だから、ここURL場合は、単純なユースケースは=

のブラウザでページをレンダリングする前にhttp://..... insert xxxx.js and yyyy.css ...

私のような怠け者のための仕事に最適なツールは何ですか？

Answer 1

greasemonkeyは学ぶのが難しくありません。ほとんどのコーディングは単純にjavascriptです。 tampermonkeyは、特定のグレースモンキー固有のコーディングを可能にするクロム用のアドオンです。 （あなたがおそらく必要とされていないこれをやっている何のために）

だけあなたの.jsを注入し、私はソースページが完全に持っていた後、あなたが実際に自分のものを実行したいと考えてい

を.CSSする数行を取る必要があります実行した場合、ロードされ、それはFacebookのに簡単なMODない私のコードで、ここで

をロードするとき、それはソースによって上書きされる前に：

を助け

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); 

希望を

この質問は、私がjqueryを@requireしてgreasemonkey内で使用したいので、私の興味にも関係します。しかし、私が働くことができる唯一の構成は上記のとおりです。

Answer 2

あなたがする必要があるのは、CSSとJSで再生し、ファイルにアクセスできない場合はいつでも「ソースを表示」し、HTMLをコピーして新しいファイルに貼り付けてから、 CSSとJSを自分のファイルに...

これは、デモンストレーションの目的でのみ使用している場合です。

Answer 3

Stylishを使用すると、CSSをより簡単に操作できます。 !importantフラグを自由に使用する必要があるかもしれませんが、これはそのフラグの使用が正当である場合の1つのケースです。

「コンテンツスクリプト」（AKAのuserscripts）やTampermonkeyは他のすべてのための最も簡単な賭けです（CSSを使うこともできます）。 GM_関数を使用しない場合は、今のところTampermonkeyをスキップできます。