宝哥软件园

用JavaScript破解网络

编辑:宝哥软件园 来源:互联网 时间:2021-08-29

并非所有黑客攻击都是恶作剧。下面是如何使用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,那么在构建自己的体验之前先进行实验,这会帮助你了解哪些模式和方法最适合你。

摘要

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

更多资讯
游戏推荐
更多+