如果您是JavaScript的新手，请与用户填充物修补

你好，陌生人！所以这可能是一个意想不到的建议。但是，如果你＆＃39;一般来说，你应该考虑与usercripts一起玩的。

在本文中，我会尝试解释什么是用户填充物，为什么我觉得它们仍然是相关的，为什么你应该尝试自己制作。

用户名是JavaScript程序，可让您更改网页的行为。如果您想要完整的定义，您可以检查维基百科定义。简而言之，他们让您自定义所需的任何网页。

但现在你可能想知道; ＆＃34;什么＆＃39;这对此有用？＆＃34;好吧，他们是一个游戏机。考虑一下，您可以注入您喜欢的JavaScript代码。这意味着您还可以注入CSS和HTML。实际上，您访问的任何网站都可以改变您想要的方式！

让＆＃39; s假设你和＃39;重新学习Web开发，并且想要将黑暗模式添加到Instagram。好吧，你可以！您只需触发DEV工具，请编写所需的CSS并通过JavaScript注入它。一个有趣的例子是这种翻译-JSOS用户脚本，我让你可以结账。

通过的真正实力通过它可以安装第三方用户脚本。通常，如果您想到某些事情，可能会有一个开发人员，他们陷入了一些时间为它开发用户脚本。您可以在Github或Greasyfork找到真正有用的用户脚本。

当然，这里的主要科目是我们想要创建自己的用户脚本。所以现在我们把它赶到了让＆＃39;祝你有一些乐趣。

用户标记由特定的扩展执行，它将让您管理已安装的用户填充物并帮助您了解它们将在ran的位置。

如果你＆＃39;重新铬（或其他基于铬的浏览器）用户，你＆＃39; ll必须安装tampermonkey🔳。一旦安装，它将在案件中打开一个免责声明的页面。

一旦它完成，就完成了扩展栏中的Greasemonkey / Tampermonkey图标，然后点击它并选择＆＃34;新用户脚本...＆＃34; /＆＃34;添加一个新脚本.. 。＆＃34;，您将被打招呼，如下所示：

既然您都设置了，让我们来检查这个生成的代码并尝试简单。

您会注意到Greasemonkey和Tampermonkey已经向您的用户脚本添加了一小部分评论。这是您脚本中最重要的部分。它将定义名称，版本，描述和其他信息。我＆＃39; ll谈论由tampermonkey自动生成的脚本自＆＃39更完整。

// == userscript == // @name我的cool userscript // @namespace https://backup-blog.tarekjelli.com/ // @version 0.1 // @description尝试接管世界！ // @author你// @match https：//backup-blog.tarekjellali.com/ // @grant none // == / userscript ==（function（）{; console.log（＆＃39;您好世界！这是一些注射的JS！＆＃39;）;}）（）;

下面的Tampermoneky代码自动生成我＆＃39; ve更改为在我的博客上运行，您可以安全地复制它并刷新此页面。如果你看看你的控制台，你会看到console.log。

正如你所看到的，一切都很直截了当。如果您想了解有关这些usercript标头变量中的每一个的更多信息，您可以检查Tampermonkey文档。

寻找最重要的价值是@match，它告诉Tampermonkey在哪里运行脚本。对于这个具体情况，我们＆＃39; Ve Set https://blog.tarekjellai.com作为我们希望这个脚本的域名是ran。您还可以使用@include，为您提供更粒度的控制。两者之间的差异是@Include可以使用正则表达式，而@Match则与这里指出。

好的，现在让＆＃39进入真正的交易。标题之后，您可以注意到应该包含要注入的代码的函数（更准确的iife）。在我们的情况下，我刚刚添加了一个console.log。

现在你可能会问自己有很多问题，我试图猜想其中一些;

好的，你可能没有问自己是最后一个问题，但我做到了。我主要为工作或娱乐提供了一些用户杆，但如果剧本变得复杂，我发现它令人生畏。加上自I＆＃39; M投入了很多类型的类型，我没有喜欢工作而没有类型检查的工作。

这是我呈现给你我的愚蠢的greasemonkey-webpack-typescript-batherplate（是的，我知道，这个名字根本不是原创的）。但是这款水板的主要目的是为您提供足够的方便工具来开始建设。您可以轻松导入SASS / SCS / CSS文件并注入它们。您也可以将HTML导入模块，然后轻松将它们注入页面。

如果你＆＃39;遗嘱兴趣开始使用这个样板，只需向我的存储库开始，找到按钮＆＃34;使用此模板＆＃34;在右上角，下一个框。你＆＃39; ll能够根据样板，没有任何多余的东西创建自己的回购。

一旦您创建了它，就会在本地克隆您的回购，打开终端并输入NPM i。这将为您安装项目需要构建的少数依赖关系。担心，当您构建脚本时，项目不会使用外部依赖项。 NPM完成后，只需使用您喜欢的代码编辑器打开您的项目。

├📂dist/├ - 🟨greasemonkey-webpack-typescript-batherplate。 user.js├📂src/├ - 📂html/││main-content.html├ - 📂scss/│││style.scss└🟦index.tsige.tažpost-build.js🟩package.json📦webpack.config .js.

虽然我希望它＆＃39; s自我解释，让＆＃39; s通过文件快速理解结构;

Dist /文件夹将包含您的用户脚本。什么＆＃39;方便的是，你可以通过github tampermonkey / greasemonkey将原始文件链接识别它并提示您如果要安装它。

在SRC /文件夹下，它直截了当：main-content.html包含您的HTML来注入。如果您不需要它，您可以添加任何您想要的或只是省略它。

style.scss包含所有风格。如果你想要的话，你可以在那里写下CSS，但我非常建议你试图写入SCSS，它＆＃39;很有趣♥！

index.ts包含您的主要入口点。您可以添加更多TS文件并导入它们等。正如您可能已经注意到的那样，我＆＃39; ve只是包括下面的最低限度如下：

进口＆＃34; ./ scss / style.scss＆＃34 ;; //没有其他需要的，编译的CSS将自动注入从＆＃34中导入app_html; ./ html / main-content.html＆＃34 ;; //您想要注入的HTML导出类APP {Constructor（）{this.injecthtml（app_html）; //控制台日志看它＆＃39; s工作console.log（＆＃34;如果您看到此消息，这意味着脚本已被注入:)）＆＃34;）; } / ** *一个简单的方法将在正文标签* / private injecthtml（htmlContent：String）{document.querySelector（＆＃34;身体＆＃34;）{document.quercertector（htmlcontent：string）{document.queryselector（＆＃34;）。InsterAdjententhtml（＆＃34;之前＆＃34;，htmlcontent）; }} //创建应用程序实例来运行所有内容const alappinstance = new app（）; //一个测试日志太窥探了

编辑🟩Package.json并将名称，版本，描述，作者，许可证，错误.URL和主页值更改为您的喜好。

在🟨post-build.js更改第24行和25（@match和@grant）以满足您的需求。您可以在脚本中注意到的其他值是从🟩Package.json中提取的。

要构建脚本，只需运行NPM运行构建，您的脚本将在Dist /文件夹中生成。如果您正确地命名了您的包裹，您的用户脚本将被命名为[your_package_name] .user.js。

在这篇文章中，我试图向您展示您的用户脚本以及为什么可以以不同的方式帮助您学习Web开发和JavaScript。我真正喜欢这种方法是你进入提交并开始黑客的东西。这有助于您了解大量网站和Web应用程序的工作。我真的希望这对你有所帮助，祝你在开发之旅中是最好的。

像往常一样，如果我犯了一些错误或忘了提到的东西，你就会知道钻头。