原始地址: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”: {