本教程介绍如何使用Chrome Tabs构建一个浏览器扩展程序，该程序可以按URL对浏览器标签进行排序。首先，你需要创建一个扩展程序清单manifest.json，接着添加一个弹出窗口的HTML文件。然后，使用Chrome的tabs API获取并排序标签，最后实现按域名重新排列浏览器标签的功能。
原始地址：https://dev.to/andyhaskell/build-your-first-chrome-extension-with-chrome-tabs-3625
Browser extension
Browser extensions是在前端Web开发的基础部分（HTML、CSS和JavaScript）上构建的一种很酷的方式。事实上，它们是我自己进入前端Web开发的入口。我真正喜欢它们的原因是，您只需要以构建网页所需的东西就可以开始构建扩展，然后通过添加浏览器API，您可以创建非常有用的应用程序！
在本教程中，我们将制作一个Chrome扩展程序，该程序可以按URL对浏览器中的标签进行重新排序。这样，如果您打开了许多来自不同网站的标签，您可以使用此扩展程序将所有来自同一网站的标签放在Chrome的顶部栏中，以便更容易浏览。
本教程假设您已经了解了JavaScript的基础知识，并且建议您了解回调函数和Array.prototype.sort方法。它适用于刚开始编写浏览器扩展程序的人。
请访问以下链接以添加扩展程序清单：
添加扩展程序清单
添加扩展程序清单
每个浏览器扩展程序都需要一个扩展程序清单。清单是一个JSON文件，它类似于“应用程序的蓝图”，告诉您诸如使用哪个图片作为扩展程序的图标，扩展程序运行的代码以及应用程序需要访问的Chrome的哪些部分（例如web历史记录或书签）之类的内容。
如果您在本教程中进行操作，请创建一个名为“tab-sorter”的文件夹，并在其下方添加一个名为“app”的文件夹，在“app”文件夹中添加一个名为“manifest.json”的文件，并将以下代码添加到其中：
{
"manifest_version": 2,
"name": "Tab Sorter",
"version": "1.0.0",
"description": "Rearrange your tabs by URL"
}
现在我们有了一个清单，其中指定了扩展程序的名称、版本和简要描述。实际上，通过这个清单，我们实际上已经有了一个可以加载到Chrome中的扩展程序，所以让我们试一试！首先转到URL chrome://extensions，在那里您可以管理Chrome中的扩展程序。然后，切换到开发者模式：
然后，您将看到左上角有一个按钮，上面写着“加载已解压的扩展程序”。点击它并选择文件夹“tab-sorter/app”，现在在顶部栏中，您应该能够看到一个带有T的图标，位于URL栏的右侧。这就是您正在创建的扩展程序。
扩展程序现在还没有任何功能，除了显示一组选项，因此让我们通过添加一个弹出窗口来改变这一点，当单击扩展程序图标时，弹出窗口会出现。在app文件夹中添加一个名为popup.html的HTML文件，并将以下HTML代码添加到其中：
<html>
<head></head>
<body>
<h1>We're running a Chrome extension!</h1>
</body>
</html>
我们有一个可以显示在弹出窗口中的页面！但是，如果我们现在重新加载扩展程序，它实际上不会使用popup.html。为了将此HTML文件用作我们的弹出窗口，我们需要在清单中添加一个browser_action，它是指定扩展程序将使用的代码的一种方法。
在manifest.json中，将browser_action添加到文件中，它应该如下所示：
{
“manifest_version”: 2,
“name”: “Tab Sorter”,
“version”: “1.0.0”,
“description”: “Rearrange your tabs by domain name”,
“browser_action”: {
最低0.47元/天 解锁文章
1362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
