使用JavaScript破解web

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

总结

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