网上有很多关于 JavaScript 的资源，从教你基础知识的课程到关于应用创建的教程。 在本文中——不需要你创建自己的应用，甚至不需要特别深入的产品知识——我将解释如何使用 JavaScript 创建有用的浏览器破解程序，以增强你的 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 上进行持久更改
我们大多数不是网页设计师的人都不希望有多个浏览器的麻烦。 我们也不希望我们的链接中充斥着 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/插件名称
一旦你有一个放置文件的地方，打开你喜欢的编辑器并创建两个文件：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"
}
]
}
这只是告诉浏览器在读取每个 Web 页面的末尾，针对所有方案（http:、https: 等），在所有路径上运行 content.js。
Content.js
你放在 content.js 中的代码与你放在 Web 页面上的任何代码相同。 为了导航图库，我使用了我的朋友 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 并发布到 Twitter 上，或者将其粘贴到下面的评论中。 如果它更复杂，例如一个扩展程序，创建一个 GitHub repo（免费注册并公开分享代码，并且有助于防止数据丢失），粘贴到下面的评论中，并在 Twitter 上发布或分享。
6 条评论