只需一个小时，您就可以构建自己的Chrome扩展程序，以便在新标签页中显示JS提示！

每周都有成千上万的Codecademy用户制作自己的闪存卡或便笺，以巩固其新的编码知识，我们认为我们会提供一点额外的技术来提供帮助。请按照该项目中的步骤构建您自己的应用程序，该应用程序会在Chrome中的每个新标签页上显示一个新的编码提示！

要完成此项目，您需要一些HTML，CSS和JavaScript的基础知识。如果您的免费学习JavaScript课程取得了一些进展，那么您应该可以完成此项目。如果您想对项目的外观进行任何修改或更全面地了解其工作原理，则还应该完成我们的免费学习HTML和CSS课程。在此处查看完成的项目的外观（无需安装任何东西）！

如果您已经下载了此Chrome扩展程序的最终版本（可在 Chrome网上应用店中找到），请遵循本指南，向您展示如何制作该项目的新版本 。通过自己构建，此扩展程序可以包含您自己的所有注释和技巧，或者具有您想要的任何新功能或内容！

当地发展

我们将在您的本地计算机上开发此应用。您将需要Google Chrome和文本编辑器（我们建议使用Atom ）。

下载入门项目

该项目专注于编写JavaScript，这将使我们能够与HTML元素进行交互。由于我们要编写JavaScript，因此我们将提供HTML，CSS和项目文件来帮助您入门。

在此处下载启动程序项目。

入门项目包括index.html，CSS文件夹和JavaScript文件夹。

产生随机提示

在文本编辑器中打开starter项目。然后，在Chrome中打开index.html 。它看起来应该像这样：

让我们通过JavaScript使此页面生动起来！

看一下js文件夹内的main.js文件。有几件事要注意。首先，我们为您提供了一个tipsList数组，其中包含HTML tipsList的JavaScript技巧。其次，在文件底部，有一堆代码注释，描述了我们将要编写的每个表达式和函数。希望他们能帮助我们在整个项目中保持跟踪。

我们的首要任务是在页面上显示随机提示。我们需要：

1.选择一个随机提示

2.将随机提示插入HTML

随机数发生器

在第30行，编写一个名为generateNumber的函数。

该函数应return 介于0和11之间的随机数，因为tipsList有11个项目数组。使用Math.random() ， Math.floor()和/或Math.round()类的函数来创建随机数。

遇到麻烦？在这里查看答案。

选择提示HTML元素

在第38行附近的“ Generate tip”注释下，声明一个名为generateTip的函数。

内部generateTip 函数，我们可以利用generateNumber 查找提示的功能。内部generateTip 函数，创建一个名为tip的变量，该变量等于tipsList数组中的一个tip。要获得一个提示，您可以编写tipsList[0]或tipsList[1] ，但是不要在方括号内写一个实际的数字，而是调用generateNumber函数，因为它返回一个数字。

遇到麻烦？在这里查看答案。

显示提示

现在我们已经选择了一个技巧，我们需要将其注入HTML。我们可以使用document.querySelector和innerHTML来实现这一点。

您可以通过CSS选择器来选择HTML元素，如下所示：

  var myNeatoElement = document.querySelector（'。neato-css-selector）;

然后，您可以使用以下方法将提示添加到其内部HTML：

  myNeatoElement.innerHTML =“西摩玉米饼！”；

上面的代码将使用.neato-css-selector查找HTML元素 CSS选择器，然后将其内部HTML设置为“ Neato burrito，Simo！”。

使用document.querySelector和innerHTML将.js-tip元素的HTML设置为tip变量。

遇到麻烦？在这里查看答案。

显示小费计数

要显示剩余的小费数量，我们声明一个小费限制变量，在按钮上显示其当前计数，然后使它在每次单击按钮时减少。

在第27行，声明一个名为tipLimit的变量，并将其设置为等于3。

然后，在generateTip函数内部，创建一个名为tipLimitCount的变量。使用.tip-limit-count CSS选择器将其设置为等于HTML元素。

现在您有了tipLimitCount 元素，将其内部HTML设置为tipLimit变量。

如果重新加载页面，则不会显示任何内容，因为我们尚未调用generateTip函数。在JavaScript文件的最后一行，调用generateTip函数，然后在Chrome中重新加载页面。

遇到麻烦？在这里查看答案。

签入：此时，您的项目应如下所示：

使按钮更具点击感

现在我们有了提示，让我们在单击按钮时对其进行更改。

聆听点击

在第54行附近，声明一个名为onTipButtonClick的函数。在函数内部，创建一个名为tipButton的变量，该变量使用document.querySelector选择.tip-button元素。

现在有了tipButton ，我们需要监听它的所有点击。为此，我们可以利用一个名为addEventListener的函数，如下所示：

  clickyClippy.addEventListener（'click'，function（）{ console.log（'嗨，我很高兴，您有用的办公室助手！'）; }）;

还记得Clippy吗？ Clippy喜欢被点击。无论如何，以上代码都采用了clickClippy类的元素，并添加了一个事件侦听器。我们正在监听的事件是'click' 。当该事件发生时，将调用进行函数。在这种情况下，它将console.log字符串发送到控制台。

使用上面的示例将click事件侦听器添加到tipButton内的onTipButtonClick元素功能。

最后一件事：开始监听点击事件，我们需要调用onTipButtonClick函数。在函数下面，调用它。然后，您可以通过在click函数中编写console.log并在单击按钮时观察控制台来对其进行测试。

遇到麻烦？在这里查看答案。

此时，单击按钮时，您到控制台的日志应如下所示：

获取有关点击的新提示

现在，让我们更改提示数，在必要时生成新提示，或者在提示用完时更改按钮的外观。

在click事件侦听器内部，请从tipLimit变量中减去1，因为每次单击都应减少其余的提示。

然后，写一个if 如果tipLimit大于或等于零，则该语句调用generateTip函数。

在相同的if语句中，编写另一个嵌套的if语句以更改按钮的文本和样式。编写一个if语句，其条件是tipLimit是否恰好为零。如果是这样，请将tipButton的内部HTML设置为“在另一个选项卡中见！”。

除了更改文本之外，我们还更改按钮的样式以使其变灰并禁用。在styles.css文件中，有一个名为disabled的类。我们可以这样添加它：

  myButtonElement.classList.add（'disabled'）;

上面的代码会将disabled的类添加到myButtonElement 。使用此示例将disabled类添加到tipButton元素。

遇到麻烦？在这里查看答案。

至此，我们有一个正在运行的应用程序。空五！

如果遇到问题，请看完整的main.js文件。

将此应用制作为Chrome扩展程序

在入门项目中，父文件夹中有一个名为manifest.json的文件。随意看看。该文件将使我们能够将该项目用作Chrome扩展程序。

确保将“ JavaScript提示标签”文件夹保存在可以找到它的位置（例如“文档”或“桌面”）。

现在，在Chrome中，让魔术发生。打开一个新标签，然后浏览至chrome：// extensions 。在此标签内，单击右上角的“ 开发人员模式”复选框：

一旦选中，将出现一些按钮。点击加载解压扩展程序…

这将打开一个文件浏览器。导航到“ JavaScript提示选项卡”项目文件夹，然后选择它。这将启用扩展。

现在，让我们成为现实：打开一个新标签页！

做得好！

您刚刚制作了一个Chrome扩展程序。有了这些知识，您就可以将任何Web应用程序扩展。哦，可能性！

如果您喜欢这个项目，请在评论中让我们知道，或者单击绿色的心。我们竭诚鼓励您添加更多功能，更多提示，并使您自己的项目成为现实。如果您确实根据在这里学到的东西来构建一些很棒的东西，请在我们的论坛上与我们和您的社区成员分享！通过共享您的更改和补充，您可以帮助成千上万的学习者像您一样学习这些基本技能。

想更多地了解编码？继续学习Codecademy 。