將我的Javascript，JQuery和CSS集成到現有站點中

Question

這是一個“最佳實踐”問題。

我想玩一個向我們提供UI的Web應用程序的外觀。 我無權訪問源或服務器。

我正在做一個“稍加努力就可以做得更好”的練習。

因此，Stack Overflow社區的問題是您選擇這樣做的武器是什么？

這不是一個黑客問題，我不想更改其他人的代碼，我只是想在自己的瀏覽器中作為演示來完成。

AFAIK Greasemonkey（或Tampermonkey，因為Chrome是我的首選瀏覽器）會吃掉它，但是對於我需要的東西可能會顯得過大（我從沒使用過，並且了解到學習曲線相當陡峭？）

所以，這是簡單的用例

如果URL = http://..... insert xxxx.js and yyyy.css在瀏覽器中呈現頁面之前http://..... insert xxxx.js and yyyy.css ...

對於像我這樣的懶人來說，最好的工作工具是什么？

Answer 1

使用時尚 ，可以更快，更輕松地操作CSS。 請注意，您可能需要自由使用!important標志，但這是合理使用該標志的一種情況。

“內容腳本”（AKA用戶腳本）或Tampermonkey是您對其他所有功能的最簡單選擇（它們也可以使用CSS）。 如果您不使用任何GM_功能，則可以暫時跳過Tampermonkey。

Answer 2

oilsmonkey不太難學，大多數編碼只是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並只在油脂猴子中使用它-但我能使用的唯一結構是上面的結構，它實際上在每次頁面加載時都會再次下載腳本。

Answer 3

如果您需要做的只是使用CSS和JS播放並且您無權訪問文件，則可以始終“查看源代碼”，將HTML復制並粘貼到新文件中，然后重新連接CSS和JS到您自己的文件...

也就是說，如果您只是出於演示目的而這樣做。