网上关于 JavaScript 的资源很多，从教你基础知识的课程到关于应用程序创建的教程。在这篇文章中——它不需要你制作自己的应用程序，甚至不需要你有特别深入的产品知识——我将解释如何使用 JavaScript 创建有用的浏览器 hack，以增强你的 Web 体验并提高生产力。
书签小程序的强大功能
我们都知道书签的用处。它们允许你保存网页的链接，对其进行分类，并添加额外的数据（元数据），以帮助你在将来快速找到它，并将其归档到你可以轻松导航的结构中。许多人不知道的是，你还可以将代码片段保存到这些书签中，这些代码片段在你所在的网页上下文中执行，包括访问其结构和样式。
如果你打开 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 并更新它们，我们可能会有更好的书签小程序。
使用插件在 Web 上进行持久性更改
我们大多数不是 Web 设计师的人都不希望有多个浏览器的麻烦。我们也不希望我们的链接中塞满 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 库，但目的是获取你需要的，以便你可以继续。而且，这比通过发送娇气的请求给开发团队来改变每个人的体验，因为你觉得它难以使用，要高效得多。
我为此使用了一个插件，而且据我所知，它并非严格意义上的开源（尽管如果你能找到 Chromium 用户个人资料文件夹，你就可以访问该代码） [User JavaScript and CSS]。但它允许你做你想做的事情，甚至可以为脚本在特定 URL 或 URL 模式上运行实施规则。
（请注意，Imgur 不再使用相同的 DOM，因此上面的代码不再有效。这确实是真的，并且对于你以这种方式发布的许多代码来说仍然如此。它不是为了建立一个帝国，只是为了消除你一天中的一些单调乏味。）
编写插件
我要讨论的最后一个主题是如何创建你自己的插件。我将专注于 Chromium 插件，因为我对这些插件的经验最多，但你可以在 Web 上找到 Firefox 和可能其他支持浏览器的链接。
你可能还想做一些雄心勃勃的事情，比如向所有带有上一页-下一页链接的页面添加键盘快捷键，或者 屏蔽 Web 上的特定仇恨言论。你可以通过使用或编写 Web 插件来做到这一点（浏览器允许）。
首先，你需要一个文件夹来存放你的文件。
mkdir -p ~/projects/addon-name
一旦你有一个地方来存放你的文件，打开你喜欢的编辑器并创建两个文件：manifest.json 和 content.js（第二个文件是特定于 JS 插件的，只是我用于基于内容的 JS 的命名约定）。
Manifest.json
此文件的代码是任何 Chromium 插件中最重要的部分。它基本上指示插件如何以及何时工作。专业地创建这些超出了本文的范围，创建 Firefox 扩展程序也是如此。有关更多信息，请访问 Chromium 官方文档 Manifest。
{
"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 职业生涯的大部分时间都花在自己保留东西上，就像咕噜拿着他的宝贝一样。一旦我开始帮助他人并分享我的想法，我自己的技能提高得比以往任何时候都快。如果它是一个书签小程序或通过现有扩展程序粘贴的脚本，请链接一个 gist 并发推文，或将其粘贴在下面的评论中。如果它更复杂，比如一个扩展程序，创建一个 GitHub 存储库（注册并公开分享代码是免费的，并且有助于防止数据丢失），粘贴到下面的评论中，并发送推文或分享。
6 条评论