用Chrome Tabs构建你的第一个Chrome扩展程序

最新推荐文章于 2024-01-15 11:49:09 发布

手机用户3381415902

最新推荐文章于 2024-01-15 11:49:09 发布

阅读量409

点赞数

文章标签： chrome 前端

本文链接：https://blog.csdn.net/u011082575/article/details/133274788

版权

原始地址：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”: {
“default_popup”: “popup.html”
}
}

browser_action.default_popup字段告诉我们，当我们点击应用程序的图标时，popup.html的内容将显示在浏览器顶部栏下的一个小窗口中。现在在chrome://extensions中，再次点击“加载解压”，或者只需单击页面上扩展程序面板中的旋转箭头图标以重新加载该扩展程序。然后，我们应该看到我们的弹出窗口！
现在我们有了一个弹出窗口，并且就像在常规HTML网页中一样，我们可以在弹出窗口中运行JavaScript代码，使应用程序执行与常规HTML / CSS / JS Web应用程序相同的所有操作。
但与常规网页不同的是，在扩展程序中，我们可以使用浏览器API来与浏览器的不同部分（如用户的标签）进行交互。我们将在下一节中开始使用这些API！
不过，在继续之前，没有图标怎么能算是一个应用程序呢！我们的图标可以是任何高度和宽度相同的图片，在这个页面上，Google提供了一套免费图标供您使用，遵循宽松的MIT许可证！下载一个看起来像左右两个箭头的128x128大小的图标，并将其保存到tab-sorter/app/128.png。然后，更改清单中的browser_action部分：

“browser_action”: {
“default_popup”: “popup.html”,
“default_icon”: {
“128”: “128.png”
}
}

现在，如果您再次重新加载扩展程序，您应该会看到：
我们迄今为止的进展在以下中：
[Commit 1](https://github.com/andyhaskell/tab-sorter/commit/69fbb02ce1f6b86b91feb6359072c59c752f3c72)

现在让我们让我们的扩展程序与浏览器标签一起使用！

# 浏览chrome.tabs API

为了对标签进行排序，我们需要一个允许我们“与”Google Chrome标签进行通信的API。我们希望能够执行的操作包括：
- 列出当前浏览器窗口中的所有标签
- 查看每个标签所在的网站，以便我们可以按URL对标签进行排序
- 移动标签以将其放置在按URL字母顺序排序的浏览器顶部栏中

Google Chrome为您提供了许多让您可以使用不同浏览器功能的API，并且您可以在[此处](https://developer.chrome.com/extensions/api_index)查看整个列表！我们想要的是chrome.tabs，并且您可以在[此处](https://developer.chrome.com/extensions/tabs)找到其文档。
如果您浏览chrome.tabs等Chrome的API之类的目录的目录，您可以看到API使用的不同类型的JavaScript对象，可以使用的API中的方法以及可以让您的Chrome扩展程序监听和响应的事件。
让我们来看一下我们将使用的类型，即标签类型。 Tab对象向我们提供有关浏览器中的单个标签的信息。其中一些信息是：
- id，一个唯一标识该标签的数字
- windowId，告诉我们标签在哪个窗口中
- highlighted，一个布尔值，告诉我们给定的标签是否是我们正在查看的标签
- 我们想要的主要字段是url，它告诉我们标签所在的URL

由于我们找到了浏览器标签对象并且知道它具有url字段，因此我们的扩展程序的伪代码如下：

let tabs = getTheTabs();
sortTheTabs(by Tab.url);
for (let i = 0; i < tabs.length; i++) {
moveTabTo(that tabs index inside the sorted array);
}

现在我们需要将这些伪代码转换为实际的代码：getTheTabs，moveTabTo和一个按Tab.url排序标签的函数。让我们首先寻找一个用于获取正在使用的浏览器窗口中的所有标签的功能。

## 列出标签

在API的目录的**方法**部分中，有许多方法，例如通过其ID号获取单个标签，打开和关闭选项卡，导航到不同的URL，甚至使用insertCSS更改选项卡的CSS。
我们想要的方法是为了在当前窗口中获取所有标签的列表，即chrome.tabs.query，其函数签名如下：

function query(queryInfo, callback)

queryInfo参数是一个JavaScript对象，为我们提供了缩小要获取的标签范围的选项。因此，要仅获取用户当前所在的浏览器窗口中的标签（例如，如果用户打开多个Chrome窗口），我们的queryInfo对象将如下所示：

{windowId: chrome.windows.WINDOW_ID_CURRENT}

然后我们有回调参数，tabs.query以及许多其他Google Chrome API方法都是**异步**的。为了确保在获取浏览器数据时不会阻塞JavaScript运行时，当我们运行chrome.tabs.query或类似方法时，我们让Chrome开始使用queryInfo获取我们正在请求的标签，然后让JavaScript继续运行其他代码。然后，当Chrome为我们提供标签列表时，回调函数运行，以让我们处理这些标签。
所以，我们的代码不再是这样：

let tabs = chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT});
// sort the tabs
// rearrange the tabs

而是变成：

chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
// sort the tabs
// rearrange the tabs
});

让我们尝试一下chrome.tabs.query，通过使弹出窗口显示我们所在的所有选项卡的项目符号列表来完成。在popup.html的body中添加script标签：

然后创建一个名为popup.js的新文件，并添加以下代码：

chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
document.write(<h3>The tabs you're on are:</h3>);
document.write(‘

’);
for (let i = 0; i < tabs.length; i++) {
document.write( <li>${tabs[i].url}</li>);
}
document.write(‘

’);
});

转到chrome://extensions，在这里重新加载扩展程序，单击弹出窗口，您将获得以下结果：
为什么所有的项目都显示为undefined？原因是我们无法看到标签上的URL，因为我们的应用程序没有请求使用标签数据的**权限**。我们需要在扩展程序的清单中设置该权限。
打开您的manifest.json，并添加以下行permissions：["tabs"]

{
“manifest_version”: 2,
“name”: “Tab Sorter”,
“version”: “1.0.0”,
“description”: “Rearrange your tabs by domain name”,
“permissions”: [“tabs”],
“browser_action”: {
“default_popup”: “popup.html”
}
}

在浏览器扩展程序商店上，用户可以查看扩展程序需要访问的权限。因此，在Chrome允许扩展程序访问每个标签中的URL之前，需要在清单中列出tabs权限。现在，重新加载Chrome扩展程序一次，您应该看到：
好了！我们现在可以获取所有标签了！现在，我们的应用程序的整体伪代码仅剩下两个步骤：对标签进行排序和移动标签以重新排列它们。因此，现在我们的伪代码看起来像这样：

chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
sortTheTabs(by Tab.url);
for (let i = 0; i < tabs.length; i++) {
moveTabTo(tabs[i], i);
}
});

我们迄今为止的进展在以下中：
[Commit 2](https://github.com/andyhaskell/tab-sorter/commit/829c8651752f8c36e8d6bebbc4dc30c103a86152)

现在让我们对标签进行排序！

# 排序标签

既然我们有了 Tabs ，下一步要解决的问题是如何对它们进行排序，以按URL顺序排列。
正如我们在上一节中看到的那样，我们有一个 Tab.url字段，可以用它来查看每个标签的URL。因此，要按照它们的URL对标签数组进行按字母顺序排序，我们可以使用JavaScript的核心**Array.prototype.sort方法**。
如果您之前没有使用过Array.prototype.sort，它允许您使用所需的顺序重新排列数组中的项目。例如，如果您运行：

let a = [‘JavaScript’, ‘C++’, ‘Go’];
a.sort();
console.log(a);

那么数组中的字符串现在将按照['C++', 'Go', 'JavaScript']的顺序排列，按照字母顺序排序。
不过，由于我们要对对象进行排序而不是字符串或数字，我们还需要传入一个**比较函数**，它接收两个标签并告诉我们哪个标签应该在数组中更早地出现。运行它将如下所示：

tabs.sort(byAlphabeticalURLOrder);

根据编写Array.prototype.sort的规则，当使用比较函数比较数组中的两个项目时：
- 如果函数返回小于0的数字，则将数组中的项目移到第一个项目之前。
- 如果函数返回大于0的数字，则将数组中的项目移到第一个项目之后。
- 如果比较函数返回完全为0，则认为这两个项目具有相等的值，并保留在数组中的原始位置。
因此，当两个标签传递给我们的比较函数时：
- 如果第一个标签的URL在第二个标签的URL之前按字母顺序出现，则返回-1，以便第一个标签在数组中更早出现。
- 如果第二个标签的URL在第一个标签的URL之前按字母顺序出现，则返回1，以便第二个标签在数组中更早出现。
- 如果两个标签具有相同的URL，则返回0，它们保持在数组中原来的顺序。
因此，让我们将其转换为代码。在popup.js的顶部添加此函数：

function byAlphabeticalURLOrder(tab1, tab2) {
if (tab1.url < tab2.url) {
return -1;
} else if (tab1.url > tab2.url) {
return 1;
}
return 0;
}

我们有了比较函数！现在让我们尝试在上一节中制作的清单函数中使用它：

chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
tabs.sort(byAlphabeticalURLOrder);

重新加载扩展程序chrome://extensions，在弹出窗口中再次打开它，它应该是这样的！

这样我们就有了按排序的标签列表！现在，为了使标签在浏览器的顶部栏中重新排列，我们只需要一个更多的Chrome函数！

我们迄今为止的进展在以下中：
[Commit 3](https://github.com/andyhaskell/tab-sorter/commit/3c0bd4da4f402cab170bebda28453480bb428ee6)

# 移动标签

在浏览Chrome的标签API文档中，我们可以看到API确实为我们提供了移动标签的函数， chrome.tabs.move！其函数签名如下：

function move(tabIds, moveProperties, callback);

- 对于tabIds参数，每个标签都有一个唯一标识符Tab.id。因此，如果我们要移动ID号为250的选项卡，我们会调用move(250, moveProperties，callback);
- moveProperties是描述将标签移动到的位置的对象。因此，我们可以通过调用 move(250, {index：0}，callback) 将ID号为250的选项卡移动到浏览器窗口的最左侧。请注意，选项卡索引是从零开始的，因此窗口中的最左侧选项卡的索引为0。
- 最后，我们到达了可选的回调。与query一样，move函数是异步的，所以如果我们想在选项卡被移动后立即执行某些操作，我们通过回调函数来运行它们。
让我们尝试一下move函数，只移动按字母顺序排列的第一个标签，将其移到窗口的最左侧。像这样编辑popup.js：

chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
tabs.sort(byAlphabeticalURLOrder);
chrome.tabs.move(tabs[0].id, {index: 0});
});

要尝试此功能，请在chrome://extensions中重新加载扩展程序，并将选项卡移动到浏览器中最右边。现在，单击扩展程序的图标，该选项卡应该移动到从左边开始的第一个选项卡。
由于我们之前已经运行了tabs.sort，所有在tabs数组中的标签现在按我们希望它们在浏览器的顶部栏中的顺序排列；数组中的第一个标签应该是顶部栏中最左侧的标签，数组中的第二个标签应该是顶部栏中的第二个标签，依此类推！
因此，如果我们在数组中以我们希望的顺序拥有所有标签，就可以使用以下循环将它们全部按URL字母顺序移动：

chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
tabs.sort(byAlphabeticalURLOrder);
for (let i = 0; i < tabs.length; i++) {
chrome.tabs.move(tabs[i].id, {index: i});
}
});

在chrome://extensions中再次仅重新加载一次扩展程序，单击其图标，现在您的选项卡应该按URL字母顺序重新排列！
但是，您可能会注意到的一件事情是，例如，如果您的顶部栏中包含twitter.com和[www.google.com](http://www.google.com)，则Twitter将首先出现在重新排列的标签中，尽管在字母顺序上Google排在Twitter之前。这是因为“www”在URL中出现在“Twitter”之后。因此，如果我们正在为一家真正的公司制作这个应用程序，下一个用户体验改进步骤可能是调整我们的比较函数，以忽略https://和www..我将把这个问题作为一个挑战来完成，也鼓励您继续尝试这个应用程序和chrome.tabs API，但是暂时，我们已经完成一个很好的MVP（最小可行产品）！
如果这是您第一次编写浏览器扩展程序，恭喜您，我希望您想继续构建一些扩展程序！我强烈推荐查看Google Chrome的[API索引](https://developer.chrome.com/extensions/api_index)，以了解您的浏览器扩展可以使用的许多其他类型的API！ 🎊
本教程的最终产品在以下中：
[Commit 4](https://github.com/andyhaskell/tab-sorter/commit/4972fedf62ddf9de568a38575e37632757c51bae)

手机用户3381415902

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Chrome Tabs构建你的第一个Chrome扩展程序

原始地址：https://dev.to/andyhaskell/build-your-first-chrome-extension-with-chrome-tabs-3625。
复制链接

扫一扫