网上有很多 JavaScript 资源，从教授基础知识的课程到关于应用程序创建的教程。在本文中——它不需要你制作自己的应用程序，甚至不需要特别深入的产品知识——我将解释如何使用 JavaScript 创建有用的浏览器 hacks，以增强你的网络体验并提高工作效率。
书签小程序的力量
我们都知道书签的用处。它们允许你保存网页的链接，对其进行分类，并添加额外的数据（元数据）以帮助你在将来快速找到它，并将其归档到一个你可以轻松浏览的结构中。许多人不知道的是，你还可以将代码片段保存到这些书签中，这些代码会在你所在的网页的上下文中执行，包括访问其结构和样式。
如果你打开 Facebook 控制台，你会发现它的开发人员非常反对这种窥探行为——这是有充分理由的。即使没有访问他们的代码，你也可以进行更改，甚至破坏一些应用程序。
Facebook 的开发人员不希望你乱动他们的控制台。
不过，你可能会忘记你输入的内容或丢失一些文本。或者，如果你像我一样，保存你打开的文件，复制它们，转到你想要的网站，打开控制台，粘贴和运行，这个过程似乎很费力。这是我用来检查网页长度的代码（以我使用的设备上的屏幕数量衡量）。这适用于 Edge、Firefox、Chromium，甚至我的手机
javascript:alert(document.body.scrollHeight / window.innerHeight)
如果我知道页面的长度，我可以提前决定是否阅读它。我用它来向客户展示网页在各种设备上的大小。
这是我使用的另一个工具，用于从程序员博客文章中删除所有图像和 gists，只获取重点（我也将它们添加为书签；我不赞成将略读作为阅读的替代方法）。
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 扩展程序 也是如此。有关更多信息，请访问 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，请在构建自己的体验之前进行实验。这将帮助你了解哪些模式和方法最适合你。
此外，如果你创建了什么东西，请分享它。我职业生涯的大部分时间都像 Gollum 对待他的 Precious 一样，把东西藏在自己身边。一旦我开始帮助他人并分享我的想法，我自己的技能提高得比以往任何时候都快。如果它是一个书签小程序或通过现有扩展程序粘贴的脚本，请链接 gist 并发推文，或将其粘贴在下面的评论中。如果它更复杂，比如扩展程序，请创建一个 GitHub 存储库（注册并公开分享代码 是免费的，并且有助于防止数据丢失），粘贴到下面的评论中，并发推文或分享。
6 条评论