网上有很多 JavaScript 资源，从教你基础知识的课程到关于应用创建的教程。在本文中——不要求你制作自己的应用，甚至不需要特别深入的产品知识——我将解释如何使用 JavaScript 创建有用的浏览器 hack，以增强你的网络体验并提高工作效率。
书签小程序的力量
我们都知道书签有多么有用。它们让你保存网页链接，对其进行分类，并添加额外的数据（元数据）来帮助你在未来快速找到它，并将其归档到你可以轻松导航的结构中。许多人不知道的是，你还可以将代码片段保存到这些书签中，这些代码片段在你所在的网页上下文中执行，包括访问其结构和样式。
如果你打开 Facebook 控制台，你会看到它的开发者非常反对这种窥探——而且理由充分。即使没有访问他们的代码，你也可以进行更改，甚至破坏一些应用。
Facebook 的开发者不希望你乱动他们的控制台。
不过，你可能会忘记你输入的内容或丢失一些文本。或者，如果你像我一样，保存你打开的文件，复制它们，转到你想要的网站，打开控制台，粘贴和运行的过程似乎很麻烦。这里有一些我用来检查网页长度的代码（以我使用的设备上的屏幕数量衡量）。这在 Edge、Firefox、Chromium 甚至我的手机上都有效
javascript:alert(document.body.scrollHeight / window.innerHeight)
如果我知道页面的长度，我可以提前决定是否阅读它。我用它来向客户展示网页在各种设备上的大小。
这是我使用的另一个工具，用于从程序员博客文章中删除所有图像和 gist，只获取重点（我也将它们加入书签；我不赞成将略读作为阅读的替代方案）。
javascript:(function(){ [].slice.call(document.querySelectorAll('img, .gist')).forEach(function(elem) { elem.remove(); }); })()
你会注意到，这些代码大多并不复杂；事实上，其中一些代码非常简单。因为这些主要是供我个人使用，所以简单就好。如果我要将这些放在 gist 中，其他人可以 fork 并更新它们，我们可能会有更好的书签小程序。
使用附加组件在网络上进行持久更改
我们大多数不是网页设计师的人都不想要多个浏览器的麻烦。我们也不希望我们的链接被 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 用户配置文件文件夹，你可以访问代码） [User JavaScript and CSS]。但它允许你做你想做的事情，甚至可以为在特定 URL 或 URL 模式上运行脚本实现规则。
（请注意，Imgur 不再使用相同的 DOM，因此上面的代码不再起作用。这确实是事实，并且对于你以这种方式发布的许多代码来说仍然如此。它不是为了建立帝国，只是为了消除你一天中的一些单调。
编写附加组件
我想讨论的最后一个主题是如何创建你自己的附加组件。我将重点介绍 Chromium 附加组件，因为我在这方面最有经验，但你可以在网上找到 Firefox 和可能其他支持浏览器的链接。
你可能还想做一些雄心勃勃的事情，例如为所有带有上一页-下一页链接的页面添加键盘快捷键，或者 屏蔽网络上的特定仇恨言论。你可以通过使用或编写网络附加组件来做到这一点（浏览器允许的情况下）。
首先，你需要一个文件夹来存放你的文件。
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 浏览器中导航至 Chrome/Extensions。
总结
我希望你喜欢阅读这篇文章，并且它帮助你在不更改每个人的代码的情况下使用软件项目。如果你刚刚接触 JavaScript，请在构建自己的体验之前进行实验。这将帮助你了解哪些模式和方法最适合你。
此外，如果你创建了什么，请分享它。我花费了我的大部分 IT 职业生涯将东西留给自己，就像 Gollum 对待他的 Precious 一样。一旦我开始帮助他人并分享我的想法，我自己的技能提高得比以往任何时候都快。如果它是一个书签小程序或通过现有扩展程序粘贴的代码，请链接一个 gist 并发布到推特上，或将其粘贴在下面的评论中。如果它更复杂，例如扩展程序，请创建一个 GitHub 存储库（注册并公开分享代码 是免费的，并且有助于防止数据丢失），粘贴到下面的评论中，并发布到推特或分享。
6 条评论