Question

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

我想要使用为我们提供UI的Web应用程序的外观和感觉。我无法访问源或服务器。

我正在做一个，“通过一些努力，这可能会好得多，”锻炼。

所以Stack Overflow社区的问题是你选择做什么的武器？

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

AFAIK Greasemonkey（或Tampermonkey，因为Chrome是我的首选浏览器）会吃掉它，但可能对我需要的东西有点过分（我从未使用过它，并且明白学习曲线相当陡峭？）

所以，这是简单的用例

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

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

Answer 1

使用Stylish，以便更快，更轻松地处理CSS。请注意，您可能需要自由使用!important标志，但这是使用该标志合理的一种情况。

“内容脚本”（AKA用户脚本）或Tampermonkey是其他所有内容最简单的选择（他们也可以做CSS）。如果您不使用任何GM_函数，那么您现在可以跳过Tampermonkey。

Answer 2

greasemonkey不是很难学，大多数编码只是简单的javascript。 tampermonkey只是chrome的一个插件，可以启用某些特定于greasmonkey的编码。（你可能不需要这样做）

只需几行注入.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);

希望有所帮助

这个问题也与我的兴趣有关，因为我想@require jquery并且只是在greasemonkey中使用它 - 但我唯一可以使用的构造就是上面的那个实际上每次加载页面时都会再次下载脚本。

Answer 3

如果你需要做的就是玩CSS和JS并且你无法访问文件，你可以随时“查看源代码”，将HTML复制并粘贴到新文件中，然后重新连接CSS和JS到你自己的文件...

也就是说，如果你只是出于演示目的而这样做。

将我的Javascript，JQuery和CSS集成到现有站点中

3 个答案: