当前位置:Gxlcms > JavaScript > 使用JavaScript破解web

使用JavaScript破解web

时间:2021-07-01 10:21:17 帮助过:4人阅读

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

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

书签的力量

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

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

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,并且无法浏览我自己的内容。我的解决方案是在控制台和页面检查器中四处游玩,看看我是否能从他们的服务中得到我想要的东西。

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

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


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

(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,在构建您自己的体验之前进行实验,这将帮助您了解哪些模式和方法最适合您。

总结

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

人气教程排行