并非所有黑客攻击都是恶作剧。下面是如何使用JavaScript让浏览器变得更好。

JavaScript的在线资源并不缺乏，从教你基础知识的课程到关于应用程序创建的教程。在本文中，我将解释如何使用JavaScript创建有用的浏览器黑客来改善您的Web体验和工作效率。本文不要求您开发自己的应用程序，甚至不要求您对产品有特别深入的了解。

书签的力量

我们都知道书签有多有用。它们允许您保存到网页的链接，对它们进行分类，并添加其他数据(元数据)，以帮助您在将来快速找到链接，并将它们归档到您可以轻松导航的结构中。很多人不知道的是，您还可以将微小的代码片段保存到这些书签中，这些书签在您的网页上下文中执行，包括访问其结构和样式。

如果你打开脸书控制台，你会发现它的开发者非常反对这种窥探——理由很充分。即使你没有访问他们的代码，你也可以修改它，甚至破坏一些应用程序。

脸书开发者不希望你搞乱他们的游戏机。

但是，您可能会忘记输入的内容或丢失一些文本。或者，如果你像我一样，保存你打开的文件，复制到你想要的网站，打开控制台，粘贴和运行的过程似乎需要很多努力。以下是我用来检查网页长度的一些代码(通过我正在使用的设备上的屏幕来测量)。这适用于Edge、火狐、Chrome，甚至我的手机：

JavaScript : alert(document.body.scrollheight/window.innerheight)如果我知道一个页面有多长，我可以提前决定是否阅读。我用它向客户展示各种设备上的网页有多大或多小。

这里是我用来删除程序员博文中所有图片和文章的另一个工具，只获取亮点(我会将它们加入书签；我不会用浏览来代替阅读。

JavaScript :(function(){[]. slice . call(document . queryselectorall(' img，gist '))。forEach(function(elem){ elem . remove()；});})()你会注意到大部分代码并不复杂；事实上，有些代码非常简单。因为这些主要是我个人用的，简单点就好。如果我把这些放在要点里，其他人可以分支出来更新，我们可能会有更好的书签。

使用外接程序在整个网站上进行持久的更改。

我们大多数不是网页设计师的人都不想要多个浏览器的麻烦。我们也不希望我们的链接被JavaScript片段弄乱。我想说的是，我不是写你自己的插件，而是用现有的插件来提升你的网络体验。

问题

当我第一次开始使用Reddit和Imgur时，我发现很难编辑它们的图库。我本可以停止使用这些工具，但我需要找到另一个在线服务并上传我的媒体。而且，我可能会忘记并返回Imgu，无法浏览自己的内容。我的解决方案是在控制台和页面检查器中玩来玩去，看看我是否能从他们的服务中得到我想要的东西。

右键单击，然后单击“检查元素”立即查看网页的结构。

大约五分钟后，我注意到大图和小缩略图之间的细微差别。我需要更大的图片，这样我就能看到我在拖什么，并建立一些叙事顺序。

解决办法

我想出的代码相对简单，只有七行。重点不是写最少的代码，甚至是最干净的代码，而是简单地完成任务：开火然后忘记！

(函数(jQuery) { jQuery('。可排序图像。可排序-图像')。css({width:'auto '，height:'auto'}) jQuery('。可排序图像(img)。每个(函数(e，elem) { var fixedImg=jQuery(this))。attr('src ')。替换(' s.png '，'。png ')；jQuery(这个)。attr('src '，FixeDimg)；});})(jQuery)；首先，我告诉网页取消高度和宽度限制，然后遍历每个可排序的图像并替换一些文件名。它不是最干净的代码；它依赖于Imgu的DOM结构保持不变，并且有jQuery库，但是它的思想是得到你需要的东西，这样你才能继续。而且，这比给开发团队发邮件改变每个人的体验要有效得多，因为你发现很难使用。

我用了一个插件。据我所知，它并不是严格意义上的OpenSource(虽然如果你能找到ChromiumUser-profile文件夹，可以访问代码)[user JavaScript和CSS]，但它允许你做你想做的事情，甚至实现脚本在特定URL或URL模式上运行的规则。

(请注意，Imgu不再使用相同的DOM，因此上面的代码不再工作。对于您以这种方式发布的大多数代码来说，这是真的，并且将继续如此。它不是为了建立一个帝国，只是为了让你的生活无聊。

作者加载项

我想讨论的最后一个话题是如何创建自己的插件。我将重点介绍ChromiumAd-ons，因为我对这些插件最有经验，但是您可以在网络上找到Firefox和其他支持浏览器的链接。

你可能还想做一些雄心勃勃的事情，比如在所有页面上添加键盘快捷键，包括以前的链接，或者阻止互联网上特定的仇恨言论。如果浏览器允许，您可以通过使用或创作网站加载项来实现这一点。

首先，你需要一个文件夹来存储你的文件。

mkdir-p ~/project/addon-name

一旦有了放置文件的地方，打开您最喜欢的编辑器，创建两个文件：manifest.json和content.js(第二个文件特定于js外接程序，这只是我用于基于内容的JS的命名约定)。

Manifest.json

该文件的代码是任何铬添加中最重要的部分。它基本上指导插件如何以及何时工作。正如本文一样，创建这些专业超出了本文的范围。创建火狐扩展

{ 'manifest_version': 2，' name': '无论你想叫这个插件什么'，' description': '这个插件做什么的简短描述。我更喜欢做好一件事的GNU哲学'，' version': '2.0 '，' Content _ scripts ' :[{ ' matches ' :[' * :/*/*]，' js' : ['content.js']，' run _ at ' : ' document _ end ' }]} https只是说明问题

Content.js

您的content.js与您放在网页上的任何代码都是一样的。为了浏览图库，我使用了我的朋友巴里生成的一段代码，这段代码使用了一个名为“相册快递”的旧软件(它是为Windows 7编写的)。

document . addeventlistener(' key up '，function(k){ switch(k . code){ case ' arrow right ' : document . queryselector(' nav . controls . link . next ')。单击()；打破；case ' ArroUp ' : document . queryselector(' nav . controls . link . up ')。单击()；打破；case ' arrow left ' : document . queryselector(' nav . controls . link . prev ')。单击()；//window . history . back()；Barry使用的软件实际上并不认为会生成‘prev’链接，所以我们必须创造性地休息；default : console . log(' Key presed : '，k)；} });从这里：

在浏览器中导航到chrome :///extensions/

加载解压缩扩展按钮chrome。

导航到保存扩展名的文件夹

最后，单击打开。

浏览chrome扩展名文件的路径。

包

我希望你喜欢阅读这篇文章，它帮助你处理软件项目，而不用为每个人改变代码。如果你只是输入JavaScript，那么在构建自己的体验之前先进行实验，这会帮助你了解哪些模式和方法最适合你。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接