javascript - 将我的 Javascript、JQuery 和 CSS 集成到现有网站中

Question

这是一个“最佳实践”问题。

我想尝试一下为我们提供 UI 的 Web 应用程序的外观。我无权访问源或服务器。

我正在做一个“如果再努力一点，这可能会好得多”的练习。

那么 Stack Overflow 社区的问题是，您选择的武器是什么？

这不是一个黑客问题，我不想改变别人的代码我只是想在我自己的浏览器中做这个作为演示。

AFAIK Greasemonkey(或 Tampermonkey，因为 Chrome 是我的首选浏览器)会吃掉这个，但对于我需要的东西来说可能有点矫枉过正(我从未使用过它并且了解它的学习曲线相当陡峭？)

所以，这是一个简单的用例

如果 URL = http://..... 在浏览器中呈现页面之前插入 xxxx.js 和 yyyy.css...

对于像我这样懒惰的人来说，最好的工作工具是什么？

Answer 1

greasemonkey 并不难学，大部分编码都是简单的 javascript。tampermonkey 只是 chrome 的一个插件，可以启用某些特定于 greasmonkey 的编码。(对于你正在做的事情，这可能不是必需的)

只需几行代码即可注入(inject)您的 .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 中使用它 - 但我唯一可以工作的结构是上面的结构，它实际上会在每次加载页面时再次下载脚本。