利用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时，发现其画廊编辑功能难以操作。虽然可以停止使用这些工具并寻找替代服务上传媒体，但可能会忘记并返回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库，但其目的是获取所需内容并让用户继续操作。相比向开发团队发送电子邮件以改变每个人的体验，这种方法更为有效，尤其是当用户觉得使用困难时。

作者使用了一个外接程序，据其了解，该程序并非严格意义上的开源（尽管如果能找到Chromium用户配置文件文件夹，确实可以访问代码）[用户JavaScript和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_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/。

点击“加载解压扩展”按钮。

导航至保存扩展的文件夹。

最后，单击“打开”。

浏览Chromium扩展文件的路径。

打包

希望读者喜欢阅读本文，并帮助您在无需更改每个人代码的情况下处理软件项目。如果您刚开始接触JavaScript，在构建自己的体验之前进行实验，将有助于了解哪些模式和方法最适合您。

总结

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