javascript网络_使用JavaScript入侵网络

javascript网络

从讲授基础知识的课程到应用程序创建教程，不乏JavaScript的在线资源。 在本文中-不需要您自己制作应用程序，甚至不需要特别的产品知识-我将解释如何使用JavaScript创建有用的浏览器黑客程序，从而改善您的Web体验并提高生产力。

小书签的力量

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

如果您打开Facebook控制台，您会发现它的开发人员非常反对这种监听-这是有充分理由的。 即使没有访问他们的代码的权限，您也可以进行更改，甚至破坏某些应用程序。

^{Facebook的开发人员不希望您弄乱他们的控制台。}

不过，您可能会忘记键入的内容或丢失一些文本。 或者，如果您像我一样，保存打开的文件，复制文件，访问所需的网站，打开控制台，粘贴以及运行的过程似乎很费力。 这是一些我用来检查网页的时间的代码（以我正在使用的设备上的屏幕为单位）。 这适用于Edge，Firefox，Chromium甚至我的手机：

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

如果知道一页有多长，我可以提前决定是否阅读。 我用它向客户展示各种设备上的网页大小。

这是另一个我用来从程序员博客文章中删除所有图像和要点的工具，仅用于突出显示亮点（我也将它们标记为书签；我不赞成使用略读作为阅读的替代方法）。

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

您会注意到，大多数代码并不复杂。 实际上，其中有些非常简单。 因为这些主要供我自己使用，所以简单就可以了。 如果我将其概括，其他人可以进行分叉和更新，我们可能会有更好的书签。

使用附加组件在网络上进行永久更改

我们大多数不是网站设计师的人都不想麻烦多个浏览器。 我们也不希望我们的链接因JavaScript片段而混乱。 明确地说，我不是在谈论编写自己的加载项，而是在使用现有的加载项来增强Web体验。

问题

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

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

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

解决方案

我想出的代码相对简单，只有七行。 关键不是写最少的代码，甚至不是最干净的代码，而是简单地完成任务：即发即忘！

   
   

    
    
 
     
     ( 
     
     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 
     
     ) 
     
     ; 
    
    
   
   

首先，我告诉网页删除高度和宽度限制，然后循环浏览每个可排序的图像并替换文件名的一部分。 这不是最干净的代码； 它依赖于Imgur的DOM结构保持不变并具有jQuery库，但其想法是获得所需的东西，以便您可以继续。 它比向开发团队发送苛刻的要求更改每个人的体验的电子邮件发送效率更高，因为您发现它很难使用。

我为此使用了一个插件，据我所知，它并不是严格意义上的OpenSource（尽管您可以访问Chromium用户配置文件文件夹，但是可以访问代码）[ User JavaScript and CSS ]。 但是，它允许您执行所需的操作，甚至为脚本执行规则以在特定的URL或URL模式上运行。

（请注意，Imgur不再使用相同的DOM，因此上面的代码不再起作用。这是正确的，对于您以这种方式发布的许多代码来说，它仍然如此。它并不是为了建立帝国而设计的，摆脱单调的一天。

创作附加组件

我要解决的最后一个主题是如何创建自己的加载项。 由于我对Chromium插件拥有最多的经验，因此我将重点介绍Chromium插件，但是您可以在网络上找到Firefox和其他可能的支持浏览器的链接。

您可能还想做一些雄心勃勃的事情，例如向具有上一个下一个链接的所有页面添加键盘快捷键，或者阻止网络上特定的仇恨言论 。 您可以通过使用或创作Web附加组件来做到这一点（浏览器允许）。

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

mkdir -p ~/projects/addon-name

一旦您有放置文件的位置，请打开您喜欢的编辑器并创建两个文件： manifest.json和content.js （第二个文件特定于JS附加组件，只是我用于基于内容的JS的命名约定）。

Manifest.json

该文件的代码是任何Chromium插件中最重要的部分。 它基本上指导插件的工作方式和时间。 与创建Firefox扩展一样，专业地创建这些也不属于本文的范围。 有关更多信息， 请访问Manifest上的Chromium官方文档 。

{
"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生成的一段代码，并使用了一个较旧的名为Album Express的软件（该软件是为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);
    }
});

从这里：

在您的Chromium浏览器中导航至chrome：// extensions /

^{在Chromium中加载未包装的扩展程序按钮。}

导航到保存扩展manifest.json的文件夹

最后，单击“打开”。

^{浏览Chromium扩展文件的路径。}

结语

我希望您喜欢阅读本文，并且它可以帮助您处理软件项目，而无需更改每个人的代码。 如果您只是开始使用JavaScript，请在​​建立自己的体验之前进行实验，这将帮助您了解哪种模式和方法最适合您。

另外，如果您创建了一些东西，请分享。 我已经度过了IT职业生涯的大部分时间，把事情留给自己，例如Gollum和他的Precious。 一旦我开始帮助他人并分享我的想法，我自己的技能就会比以往更快地进步。 如果是通过现有扩展名粘贴的小书签或脚本，请链接要点并将其发布，或将其粘贴在下面的注释中。 如果它更复杂（例如扩展），则创建一个GitHub存储库（可以免费签名和公开共享代码 ，并且可以防止数据丢失），粘贴到下面的注释中，并进行鸣叫或共享。

翻译自: https://opensource.com/article/17/8/using-javascript-hack-web

javascript网络