我们不需要介绍什么是Chrome扩展程序。 如果您使用的是Chrome，则可能至少安装了2–3个扩展程序。 是Grammarly扩展名以确保您的帖子在语法上是正确的，或者是Honey扩展名以在从亚马逊结帐时应用优惠券。 在Chrome浏览器上浏览网页时，有成千上万的扩展程序可以为您提供帮助。
但是，您是否想过如何创建这些Chrome扩展程序？ 在创建一个魔术技巧之前，您需要了解什么？
好吧，我告诉你，创建一个基本的Chrome扩展程序非常容易，几乎不会花费15-20分钟的时间。 您需要了解的魔术技巧是JavaScript。 对语言的初学者知识足以入门。 如果您不熟悉它，我建议您先学习一下该语言的基础知识。 W3Schools是一个很好的资源。
如果您正在阅读本文，我想您知道JS的基础知识。 因此，让我们开始吧。
我们将要创建的扩展将监视我们在特定网站（例如“ Facebook”）上花费的时间。 这将类似于Dryft扩展程序，该扩展程序监视您要监视的任何网站。
现在我们知道我们想做什么，我们需要弄清楚该怎么做。
这大致就是我们的做法：
1.在Chrome的本地存储中设置一个计数器 ，以计算在Facebook上花费的秒数。 该计数器的初始值应为0。
2.每当用户打开选项卡时，请检查其是否为Facebook（使用document.URL和RegEx）
3.如果是，则每秒增加一次计数器，直到他在Facebook上。
该文件仍然存在。 扩展的入口点是清单文件。 这是一个JSON文件，其中包含扩展名，描述，图标，权限和其他相关数据。 我们将其称为“ 宾果游戏” （ Bingo） （对不起，没想到好名字）。 这就是manifest.json文件的外观。
{
“ name”：“ Bingo”，
“ description”：“ Facebook使用情况监控器”，
“ version”：“ 1.0”，
“ manifest_version”：2
“权限”：[“存储”]，
“ content_scripts”：[{
“火柴”： [”*：//*/*”]，
“ js”：[“ content.js”]
}]，
}
让我们定义这些属性：
“名称”：<扩展名>
“说明”：<扩展说明>
“版本”：
“ manifest_version”：
“权限”：
“ content_scripts” ：
除“权限”和“ content_scripts”外 ，其他所有属性都是自描述性的，易于理解。 “存储”权限是使用Chrome的存储空间来存储扩展程序的数据。 下一节将说明内容脚本。
内容脚本是JavaScript片段，代表您的扩展程序在特定的选项卡/窗口上运行。 如果需要，可以有多个内容脚本。 在我们的例子中，与manifest.json相同的文件夹中只有一个名为content.js的内容脚本。
var fb =“ https://www.facebook.com”;
var regex = new RegExp（“ \\ b” + fb +“ *”）; //创建一个新的RegEx ///检查是否在当前选项卡中打开了Facebook
if（regex.test（document.URL））{
initContentScript（）;
}函数initContentScript（）{
//从本地存储（不是localStorage）获取“计数器”值。
chrome.storage.local.get（“ counter”，function（result）{//如果尚未定义“ counter”，则将其设置为0。
var counter =计数器|| 0;
//每5秒更新一次计数器
setInterval（function（）{
计数器=计数器+ 5;
chrome.storage.local.set（{counter：counter}）;
}，5000）；
}）;
}
就是这样。 我们已经准备好清单文件和内容脚本 。 在内容脚本中，我们使用了Chrome的本地存储API来存储扩展数据。 “ get（）”方法从存储中获取数据，“ set（）”方法设置数据。 我们需要在清单文件中指定“存储”权限才能使用此存储。
我们将在HTML文件中显示数据。
Facebook使用情况
您在Facebook上花费了 秒
chrome.storage.local.get（“ count”，函数（结果）{
var count =结果|| 0;
document.querySelector（“ span”）。innerHTML = count;
}）;
</ html
将其另存为manifest.json所在的文件夹中为index.html 。
- 去 chrome：// extensions
- 打开右上角的“开发人员模式”。
- 现在单击“加载解压”。
- 选择包含清单文件的文件夹。
- 如果您正确地遵循了这篇文章，那么您将在Chrome上安装Bingo 。
现在，打开Facebook大约20秒钟，以便内容脚本更新计数器。
要查看您花了多少钱，请打开 chrome：// extensions 再次，您会在扩展名和说明的下方看到一个ID 。 它可能看起来像oakkikpbkcfeemkepnftmbnorfpdblfnf。
复制它，然后打开：
chrome-extension：// /index.html
瞧 您已经为自己创建了Facebook监视器。
如果您还想监视其他网站，则可以尝试Dryft 我的延伸🙂。 它轻巧，并显示每日，每周，每月和每年的统计信息。 另外，它是完全免费的。
现在您已经知道创建一个简单的Chrome扩展程序很容易，我建议您继续创建一个。 它不一定是一个开创性的想法。 做一些有趣的事情。 完成后， 请不要忘记在评论中分享它。 对于查询，请随时使用评论部分。
另外，如果对您有用，请不要忘记按一下拍手按钮并分享这篇文章。
