將我的Javascript，JQuery和CSS集成到一個現有網站中

這是一個'最佳實踐'問題。將我的Javascript，JQuery和CSS集成到一個現有網站中

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

我正在做一個「這可能會更好一點點努力」練習。

所以堆棧溢出社區的問題是什麼是你選擇這樣做的武器？

這不是一個黑客問題，我不想改變別人的代碼我只想在我自己的瀏覽器中做這個演示。

AFAIK的Greasemonkey（或Tampermonkey因爲Chrome是我的首選瀏覽器）會吃這個，但可能是矯枉過正了什麼，我需要（我從來沒有使用過它，理解，有一個相當陡峭的學習曲線？）

所以，這裏的簡單的用例

如果URL = http://..... insert xxxx.js and yyyy.css瀏覽器渲染頁面之前...

什麼做這份工作對像我這樣的懶人的最佳工具？

來源

2012-03-30 Eric T

你試過螢火蟲和網頁開發者嗎？ – qwertymk 2012-03-30 00:48:04

greasemonkey不是太難學，大部分編碼都是簡單的javascript。 tampermonkey只是一個chrome插件，它支持某些特定的greasmonkey編碼。（你在做什麼，這大概不是必需的）

應該只需要幾行注入你的.js和.css

我相信你真的想要你的東西運行源頁面完全後加載後，如果運行前，將通過源被覆蓋在加載時

這裏是我的代碼，做一個簡單的MOD給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);

希望幫助

這個問題也與我的興趣有關，因爲我想要@ququire jquery並在greasemonkey中使用它 - 但唯一能夠工作的構造是上面實際下載每個頁面負載時再次下載腳本的構造。

來源

2012-04-01 05:57:34 RozzA

或者 - 查看greasemonky插件的強大功能！ [YUI很酷，]（http://wiki.greasespot.net/Third-Party_Libraries#YUI）只有2行代碼，你可以插入你的自定義代碼和風格 – RozzA 2012-04-01 06:06:23

整潔！這將完美地完成這項工作 – 2012-04-02 04:48:56

如果您只需要播放w/CSS和JS，並且無法訪問這些文件，則可以隨時「查看源代碼」，將HTML複製並粘貼到新文件中，然後重新連線CSS和JS到你自己的文件...

也就是說，如果你只是爲了演示而做它。

來源

2012-03-30 00:16:11 Jason

謝謝，但我可能應該補充說，網頁上有一些動態內容 - 這就是爲什麼我需要將它包裝在自定義shell中而不是僅僅採用靜態副本 – 2012-03-30 01:12:48

使用Stylish，更快，更容易操作CSS。請注意，您可能需要自由使用!important標誌，但這是使用該標誌是合理的一種情況。

「內容腳本」（AKA userscripts）或Tampermonkey是您最簡單的一切選擇，（它們也可以做CSS）。如果你沒有使用任何GM_函數，那麼你現在可以跳過Tampermonkey。

來源

2012-03-30 00:41:42

看起來像是時間學習Tampermonkey。 .. – 2012-03-30 01:48:44

將我的Javascript，JQuery和CSS集成到一個現有網站中

回答

相關問題