如何在页面加载之前找到 hookers 来呈现 javascript？（查看前的css、js注入）[关闭]答案

【问题标题】：how to find hookers to render a javascript before page onload? (css, js injection before viewing) [closed]如何在页面加载之前找到 hookers 来呈现 javascript？（查看前的css、js注入）[关闭]
【发布时间】：2016-05-10 19:30:25
【问题描述】：

有工具吗每当您在阅读之前打开需要自定义代码注入的新浏览器页面时，自动呈现下面的步骤 1-4。

例如：应用自定义您访问的页面之前的 javascript 或 css 触发 onload() 事件；与“预加载器”非常相似，

1.先隐藏内容容器，

2.等待一切完成下载

3.在加载的内容上应用css或js

4.finally 显示修改后的内容。

例如，我们可以轻松地在 chrome F12 控制台或检查器上进行 css 或 javascript 更改，方法是键入一些（以 javascript 为例） $('img').css('visibility','hidden') 隐藏当前页面的所有图像。

寻找将此类自定义脚本挂接到浏览器的更简单方法，以便在浏览您访问的所有页面时，您不必手动键入并按 Enter 来运行自定义脚本。

【问题讨论】：

请看看你是否可以在 FIrefox 中使用greasemonkey 扩展来做同样的事情
一个扩展将完全做到这一点。让谷歌回答How to develop chrome extension
不确定为什么要使用greasemonkey，因为您标记了chrome和chrome扩展，而不是firefox扩展
很遗憾线程将以 1 票关闭，无需进一步讨论。 @JaromandaX
为什么要告诉我，我不在乎它跑题了

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

使用stylish for chrome注入样式
使用tampermonkey注入javascript

【讨论】：

相比javascript，css注入更加轻量，感谢两个扩展。所有测试，工作正常。但是比较“greasemonkey”和“tampermonkey”，后者的管理面板似乎有更多的选项，但 UI 看起来比 fireFox 扩展丑得多。

【解决方案2】：

@Shadow 是第一个推荐 Firefox 扩展的人：greasemonkey

所以我试过了，只是在这里分享配置供您参考。工作正常。

// ==UserScript==
// @name        myscript
// @namespace   testscript
// @description hideall images
// @include     
// @version     1
// @grant       none
// ==/UserScript==
var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery.js";
document.getElementsByTagName('head')[0].appendChild(jq);

$(window).load(function(){
   $('img').css('visibility','hidden');
});

时尚 chrome 运行良好，其 UI 非常干净且用户友好。对于上面的例子效果，css注入只需要设置一行 img{ visibility:hidden; } 对于简单的隐藏/显示修改，时尚是应用它的最佳工具。

inject javascript tampermonkey 运行类似于 firefox greasemonkey 感谢这些建议。如果你想自定义更复杂的注入控件，可以使用 js 注入器或与 css 注入器一起使用。

【讨论】：