使用JavaScript破解web


Posted in Javascript onSeptember 28, 2018

并非所有的黑客行为都是恶作剧。下面是如何使用JavaScript使浏览器更好的方法。

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

书签的力量

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

如果你打开Facebook控制台,你会发现它的开发者非常反对这种窥探-这是有理由的。即使没有访问他们的代码,你也可以进行修改,甚至破坏一些应用程序。

使用JavaScript破解web

Facebook的开发者不想让你弄乱他们的控制台。

不过,你可能会忘记你输入的内容,或者丢失一些文本。或者,如果您像我一样,保存您打开的文件,复制它们,到您想要的网站,打开控制台,粘贴和运行的过程似乎需要很大的努力。下面是一些我用来检查网页的长度的代码(用我正在使用的设备上的屏幕来衡量)。这在Edge,Firefox,Chrome,甚至我的手机上都适用:

javascript:alert(document.body.scrollHeight / window.innerHeight)

如果我知道一页有多长,我可以预先决定是否要读。我用它来向客户展示各种设备上有多大或多小的网页。

下面是我使用的另一个工具,用于删除程序员博客文章中的所有图片和文章,只获取高光部分(我还会对它们进行书签;我不会将浏览作为阅读的替代方案)。

javascript:(function(){ [].slice.call(document.querySelectorAll('img, .gist')).forEach(function(elem) { elem.remove(); }); })()

您会注意到,大多数代码并不复杂;实际上,有些代码非常简单。因为这些主要是我个人用的,简单就行了。如果我把这些放在要点中,其他人可以分叉并更新它们,我们可能会有更好的书签。

使用加载项在整个web上进行持久更改。

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

问题

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

使用JavaScript破解web

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

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


我想出的代码比较简单,只有七行。重点不是写最少的代码,甚至是最干净的代码,而是简单地完成任务:开火忘记!

(function(jQuery) {
 jQuery('.sortable-image img, .sortable-image').css({width:'auto',height:'auto'})
 jQuery('.sortable-image img').each( function(e,elem) {
 var fixedImg = jQuery(this).attr('src').replace('s.png','.png');
 jQuery(this).attr( 'src', fixedImg );
 });
})(jQuery);

首先,我告诉网页删除高度和宽度限制,然后循环遍历每个可排序的图像,并替换部分文件名。它不是最干净的代码;它依赖于Imgu的DOM结构保持不变,并拥有jQuery库,但是它的思想是获得所需的东西,这样您就可以继续了。而且,它比向开发团队发送电子邮件以更改每个人的体验要有效得多,因为您发现它很难使用。

我对此使用了一个外接程序,据我所知,它并不是严格意义上的OpenSource(尽管如果您能够找到ChromiumUser-profile文件夹,您确实可以访问代码)[用户JavaScript和CSS]但是它允许您做您想做的事情,甚至可以实现脚本在特定URL或URL模式上运行的规则。

(请注意,Imgu不再使用相同的DOM,因此上面的代码不再工作了。对于您以这种方式发布的大部分代码来说,这是正确的,并且将继续如此。它不是为建立一个帝国而设计的,只是为了让你的生活变得单调乏味。

创作加载项

我想要讨论的最后一个主题是如何创建您自己的附加组件。我将重点关注ChromiumAd-ons,因为我对这些插件有最丰富的经验,但是您可以在Web上找到Firefox和其他支持浏览器的链接。

您还可能想要做一些雄心勃勃的事情,比如向所有页面添加键盘快捷键,其中包含前面的链接或屏蔽网络上特定的仇恨言论。您可以通过为Web使用或创作附加组件来完成此操作(如果浏览器允许)。

首先,您需要一个文件夹来存放您的文件。

mkdir -p ~/projects/addon-name

一旦您有了放置文件的位置,打开您最喜欢的编辑器并创建两个文件:manifest.json和content.js(第二个文件是特定于JS加载项的,它只是我为基于内容的JS使用的命名约定)。

Manifest.json

这个文件的代码是任何铬添加的最重要的部分.它基本上指导插件的工作方式和时间。创建这些专业不属于本文的范围,正如本文所做的那样。创建Firefox扩展

{ "manifest_version": 2, "name": "Whatever you want to call the plugin", "description": "A brief description of what the plugin does. I prefer the GNU philosophy of do one thing well", "version": "2.0", "content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_end" } ] }

这只是告诉浏览器在读取所有方案(http:、https:等)的每个网页时,在所有路径上运行content.js。

Content.js

你在你的content.js与您在网页上放置的任何代码相同。为了浏览图库,我使用了我的朋友Barry生成的一段代码,它使用了一个名为相册速递(它是为Windows 7编写的)的旧软件。

document.addEventListener('keyup', function(k) { switch(k.code) { case "ArrowRight": document.querySelector('.nav.controls .link.next').click(); break; case "ArrowUp": document.querySelector('.nav.controls .link.up').click(); break; case "ArrowLeft": document.querySelector('.nav.controls .link.prev').click(); // window.history.back(); // The software Barry uses actually doesn't think to generate "prev" links, so we have to be creative break; default: console.log("Key Pressed:", k); } });

从这里:

导航到chrome://extensions/在你的浏览器里

使用JavaScript破解web

加载解压扩展按钮铬。

导航到保存扩展的文件夹

最后,单击“打开”。

使用JavaScript破解web

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

包起来

我希望您喜欢阅读这篇文章,并且它帮助您在不为每个人更改代码的情况下处理软件项目。如果您只是进入JavaScript,在构建您自己的体验之前进行实验,这将帮助您了解哪些模式和方法最适合您。

总结

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

Javascript 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 #Javascript
JS canvas绘制五子棋的棋盘
May 28 #Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 #Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 #Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 #Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 #Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
随机头像PHP版
2006/10/09 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python文件操作基本流程代码实例
2017/12/11 Python
用Python实现KNN分类算法
2017/12/22 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python操作json的方法实例分析
2018/12/06 Python
pyqt5实现登录界面的模板
2020/05/30 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
学校司机岗位职责
2013/11/14 职场文书
职工运动会邀请函
2014/02/02 职场文书
毕业自我评价
2014/02/05 职场文书
趣味活动策划方案
2014/02/08 职场文书
高中运动会入场词
2014/02/14 职场文书
总经理人事任命书
2014/06/05 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Python进程池与进程锁之语法学习
2022/04/11 Python
教你nginx跳转配置的四种方式
2022/07/07 Servers