谷歌插件开发：Tabs Manager API 详解（手把手带你从零探索开发谷歌插件）
我正在参加「掘金·启航计划」
在本节中，我们继续进阶，我们将深入介绍 Google 插件的高级特性之一：Tabs Manager API。Tabs Manager API 允许开发者管理和控制浏览器标签页，提供了强大的功能和灵活性，旨在提升用户的浏览器操作体验。本节将为大家介绍 Tabs Manager API 的相关内容，包括其包含哪些方法、各个方法的作用、应用场景以及注意事项等。并且会利用 Tabs Manager API 提供的功能为大家规划一个实用的 Google插件，以便于大家更容易地就能掌握 Tabs Manager API 。
课程目录（暂定18节）
后续可持续关注此贴，目录路径都会补上，点击即可跳转前往
- 序章：拓展技术池，一起来探索谷歌插件吧！
- 插件结构：manifest.json 配置文件详解
- 实战开发：创建自己的第一个Google插件
- 插件结构：background.js 文件详解
- 进阶高级：Browser Action API 详解
- 进阶高级：Tabs Manager API 详解
- 谷歌插件开发：content.js 文件详解
- 谷歌插件开发：Content Script API 详解
- 谷歌插件开发：Message Passing API 详解
- 谷歌插件开发：Storage API 详解
- 谷歌插件开发：File System Access API 详解
- 谷歌插件开发：XMLHttpRequest 详解
- 进阶高级：Bookmarks API 详解
- 进阶高级：Downloads API 详解
- 进阶高级：如何使用vue来开发一款Google插件
- 实战开发：从零开发一款企业级Google插件（上）
- 实战开发：从零开发一款企业级Google插件（下）
- 收官之作：总结与展望
一. 基本介绍
Tabs Manager API 是 Google Chrome 插件提供的一个强大的 API，用于管理和操作浏览器标签页。通过 Tabs Manager API，开发者可以获取当前打开的标签页信息、创建新的标签页、切换到特定的标签页、关闭标签页等操作。Tabs Manager API 提供了丰富的方法和事件，使开发者能够灵活地控制和管理用户的浏览器标签页。
在实际开发场景中，我们可以使用 Tabs Manager API 来实现以下功能，例如：
- 标签页管理器： 可以使用它来创建一个标签页管理器，可以方便地管理和控制浏览器标签页。
- 标签页截图工具： 可以使用它来获取当前标签页的截图，实现一个简单的标签页截图工具。
- 广告过滤器： 可以使用它在标签页中执行 JavaScript 代码，实现一个简单的广告过滤器。
- 多语言翻译工具： 可以使用它来检测标签页的语言，并在标签页中执行 JavaScript 代码，实现一个多语言翻译工具。
- 自动化测试工具： 可以使用它在标签页中执行 JavaScript 代码，实现一个简单的自动化测试工具。
Tabs Manager API 允许开发者获取当前浏览器中打开的标签页信息，包括标题、URL、图标等。开发者可以通过 API 提供的方法和事件，实现对标签页的切换、关闭、重新加载等操作，提升用户的浏览器管理体验。而且，Tabs Manager API 还提供了强大的消息传递机制，使不同的标签页之间可以进行数据交换和通信。开发者可以利用这一特性，实现多标签页间的数据共享、状态同步等功能，提供更丰富的交互和联动效果。
我们可以为标签页添加右键菜单，提供额外的操作选项。在背景脚本中使用 "chrome.contextMenus.create" 方法创建上下文菜单，并指定相应的回调函数。
chrome.contextMenus.create({
title: "在新标签页中打开链接",
contexts: ["link"],
onclick: function(info, tab) {
chrome.tabs.create({ url: info.linkUrl });
}
});
上面的代码中，当用户在链接上右键点击时，将显示上下文菜单，并在点击菜单项时在新标签页中打开链接。
我们还可以为插件添加自定义的快捷键，触发特定的标签页操作。在背景脚本中使用 "chrome.commands" API 注册快捷键和相应的处理函数。
chrome.commands.onCommand.addListener(function(command) {
if (command === "close_tab") {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
var tabId = tabs[0].id;
chrome.tabs.remove(tabId);
});
}
});
上面的代码中，当用户按下指定的快捷键（例如：Alt + W）时，将关闭当前活动的标签页。
通过使用 Tabs Manager API 的可配置项，开发者可以根据插件的需求来定制标签页的外观和行为，提供更丰富的用户体验和功能。
需要注意的事项 ⚠️
在使用 Tabs Manager API 进行标签页的操作时，需要注意以下事项：
- 权限：在 manifest.json 文件中需要声明使用 tabs 权限，例如：
"permissions": [
"tabs"
]
- 异步调用：所有的 Tabs Manager API 方法都是异步调用的，需要使用回调函数来获取操作结果。
- 标签页状态：需要注意标签页的状态，例如是否激活、是否可见等。
- 跨域访问：由于浏览器的安全机制限制，不能直接访问跨域的标签页，需要使用 Content Script 或者代理服务器等方式进行跨域访问。
Tabs Manager API 主要提供了以下内容 ：
| 字段名 | 描述 |
|---|---|
| chrome.tabs.create | 创建新标签页 |
| chrome.tabs.update | 更新现有标签页的属性 |
| chrome.tabs.move | 移动标签页的位置 |
| chrome.tabs.remove() | 关闭指定的标签页 |
| chrome.tabs.query() | 查询标签页的信息 |
| chrome.tabs.duplicate() | 复制标签页 |
| chrome.tabs.highlight() | 高亮显示指定的标签页 |
| chrome.tabs.reload() | 重新加载指定的标签页 |
| chrome.tabs.goBack() | 回到上一个页面 |
| chrome.tabs.goForward() | 前进到下一个页面 |
| chrome.tabs.executeScript() | 在标签页中执行 JavaScript 代码 |
| chrome.tabs.insertCSS() | 在标签页中插入 CSS 样式 |
| chrome.tabs.detectLanguage() | 检测标签页的语言 |
| chrome.tabs.getZoom() | 获取标签页的缩放比例 |
| chrome.tabs.setZoom() | 设置标签页的缩放比例 |
| chrome.tabs.setZoomSettings() | 设置标签页的缩放设置 |
| chrome.tabs.captureVisibleTab() | 获取标签页的截图 |
二. 主要方法
1. chrome.tabs.create
chrome.tabs.create 用于创建新的标签选项卡，其具体功能包括：
- 创建一个新的标签选项卡，并打开指定的 URL。
- 可以对新建立的标签选项卡进行一些基本设置，比如是否激活、载入状态等。
- 该方法支持通过回调函数来获取新建标签选项卡的 ID 和相关信息。
其作用是让用户能够快速打开指定的网页，它可以在任何需要打开特定网页的情况下使用，比如从图标点击事件中打开某个页面、从快捷键中打开特定网页等。
它包含多个参数，具体如下：
createProperties (object) ：表示要创建的标签选项卡的属性设置对象，包含以下可选参数：
active (boolean)：指示是否激活该标签选项卡，默认为 true。pinned (boolean)：指示是否钉住该标签选项卡，默认为 false。url (string)：指定要在标签选项卡中打开的 URL。index (integer)：指定新标签选项卡在窗口中的位置。openerTabId (integer)：指定创建该标签选项卡的原始标签选项卡的 ID。
callback (function) ：创建完新标签选项卡后的回调函数，该函数包含以下参数：
tab (object)：表示已创建的新标签选项卡的详细信息。error (string)：如果出现错误，表示错误信息。
在使用 chrome.tabs.create 方法时，createProperties 参数是必须指定的，而 callback 参数则是可选的。
需要注意的事项 ⚠️
- 参数
createProperties是一个对象，包含了多个可选参数，需要根据实际需求来设置。 - 在设置 URL 或者其他属性时，如果设定不当，可能会影响用户体验或者窃取用户隐私。
- 需要注意异步加载的问题，需要等待其完全载入后再执行相应的操作。
2. chrome.tabs.update
chrome.tabs.update 用于更新指定标签选项卡的属性。该方法包含以下功能：
- 可以修改标签选项卡的各种属性，如 URL、标题、图标等。
- 可以设置标签选项卡的打开状态，如是否激活选项卡、是否强制重新加载页面等。
- 通过回调函数可以获取操作结果。
它包含以下参数：
tabId (integer) ：表示要更新的标签选项卡的 ID，必须指定。
updateProperties (object) ：表示要更新的标签选项卡的属性设置对象，包含以下可选参数：
url (string)：表示要在标签选项卡中打开的新 URL。active (boolean)：指示是否激活该标签选项卡，默认为当前值。highlighted (boolean)：指示是否将标签选项卡高亮显示，默认为当前值。pinned (boolean)：指示是否钉住该标签选项卡，默认为当前值。title (string)：表示标签选项卡的新标题。iconUrl (string)：表示标签选项卡的新图标。muted (boolean)：指示标签选项卡是否静音。audible (boolean)：指示标签选项卡是否正在播放声音。cookieStoreId (string)：表示要使用的 Cookie 存储 ID。openerTabId (integer)：指定创建该标签选项卡的原始标签选项卡的 ID。
callback (function) ：更新完标签选项卡属性后执行的回调函数，可以获取更新后的标签选项卡信息，该函数包含以下参数：
tab (object)：表示已更新的标签选项卡的详细信息。error (string)：如果出现错误，表示错误信息。
需要注意的事项 ⚠️
- 参数 tabId 表示要更新的标签选项卡的 ID，必须指定。
- 在使用回调函数时需要注意异步加载的问题，需要等待其完全载入后再执行相应的操作。
- 如果更新某个标签选项卡的属性，但该标签选项卡当前未打开，则无法修改其属性。
3. chrome.tabs.move
chrome.tabs.move 用于将指定标签选项卡移动到新的位置。常见的应用场景包括：
- 将一个标签选项卡从当前窗口移动到另一个窗口。
- 将一个未激活的标签选项卡移动到任意位置。
- 对多个标签选项卡进行排序。
它包含以下参数：
tabId (integer) ：表示要移动的标签选项卡的 ID，必须指定。
moveProperties (object) ：表示要移动的标签选项卡的属性设置对象，包含以下可选参数：
windowId (integer)：表示目标窗口的 ID。index (integer)：表示新的位置索引。
callback (function) ：移动完成后执行的回调函数，可以获取移动后的标签选项卡信息。该函数包含以下参数：
tab (object)：表示已移动的标签选项卡的详细信息。error (string)：如果出现错误，表示错误信息。
需要注意的事项 ⚠️
- 参数 tabId 表示要移动的标签选项卡的 ID，必须指定。
- 在设置 moveProperties 参数时，必须保证 index 的值大于等于 0 ，小于最大索引值，否则会出现错误。
4. chrome.tabs.reload
chrome.tabs.reload 用于重新加载指定标签选项卡的页面。常见的应用场景包括：
- 重新加载当前标签选项卡或多个标签选项卡，以刷新页面内容。
- 当发生网络错误或页面加载慢等情况时，强制重新加载页面。
它包含以下参数：
tabId (integer) ：表示要重新加载的标签选项卡的 ID，必须指定。
reloadProperties (object) ：表示要重新加载的标签选项卡的属性设置对象，包含以下可选参数：
bypassCache (boolean)：指示浏览器是否应该忽略缓存并重新加载页面，默认为 false。currentWindow (boolean)：指示是否仅重新加载当前窗口中的标签选项卡，默认为 true。allFrames (boolean)：指示是否也应重新加载所有内联框架（IFrame）中的内容，默认为 false。
callback (function) ：重新加载完成后执行的回调函数，可以获取重新加载后的标签选项卡信息。该函数包含以下参数：
tab (object)：表示已重新加载的标签选项卡的详细信息。error (string)：如果出现错误，表示错误信息。
需要注意的事项 ⚠️
- 参数 tabId 表示要重新加载的标签选项卡的 ID，必须指定。
- 在设置 reloadProperties 参数时，如果忽略了 bypassCache 属性，则默认将使用浏览器缓存而不是重新加载页面。
除了上述的基本用法和注意事项，chrome.tabs.reload 方法还有以下特点：
- 当在重新加载标签选项卡时，如果页面正在通过 JavaScript 定时器或事件定时器等方式进行动态更新，则重新加载后这些定时器将被重置。
- 可以使用
chrome.tabs.onUpdated事件来检测标签选项卡何时已完成重新加载，并在需要时执行相关操作。
chrome.tabs.reload 方法还通常用于实现以下功能：
- 强制重新加载网页来消除浏览器缓存和其他过时数据。
- 快速刷新当前活动标签选项卡以查看新内容。
- 批量重新加载多个标签选项卡，以节省时间并简化工作流程。
5. chrome.tabs.remove
chrome.tabs.remove 用于关闭指定标签选项卡。该方法包含以下功能：
- 可以关闭当前正在活动的标签选项卡。
- 可以关闭所有标签选项卡或指定的标签选项卡。
- 通过回调函数可以获取操作结果。
它包含以下参数：
tabId (integer) ：表示要关闭的标签选项卡的 ID，必须指定。
removeProperties (object) ：表示要关闭的标签选项卡的属性设置对象，包含以下可选参数：
windowId (integer)：表示目标窗口的 ID。index (integer)：表示要关闭的标签选项卡在其所属窗口中的位置。
callback (function) ：关闭完成后执行的回调函数，可以获取关闭后的标签选项卡信息。该函数包含以下参数：
error (string)：如果出现错误，表示错误信息。
需要注意的事项 ⚠️
- 参数 tabId 表示要关闭的标签选项卡的 ID，必须指定。
- 在关闭标签选项卡时，将无法恢复已经关闭的标签选项卡。
- 在回调函数中对标签选项卡进行操作时需要注意异步加载的问题，即必须等待其完全载入后再执行相应的操作。
除了上述的基本用法和注意事项，chrome.tabs.remove方法还有以下特点：
- 在关闭标签选项卡时，如果该标签选项卡正在进行某些操作（例如上传文件），则可能需要用户确认才能关闭。
- 可以使用
chrome.tabs.onRemoved事件来监视标签选项卡何时已被关闭，并在需要时执行相关操作。
三. 应用示例
根据 Tabs Manager API 提供的功能，我们来实现一个简单的书签管理器插件，该插件可以帮助用户在浏览器中快速添加、编辑和删除书签，从而提高用户的工作效率。
下面我们先来看看预览效果：
然后看下我们规划的目录结构
我们先在扩展程序根目录下创建 manifest.json 文件，并添加以下配置：
{
"name": "简易书签管理器",
"version": "1.0",
"description": "一个简单的书签管理插件",
"manifest_version": 2,
"icons": {
"16": "icon/icon16.png",
"48": "icon/icon48.png",
"128": "icon/icon128.png"
},
"permissions": [
"tabs",
"storage"
],
"browser_action": {
"default_icon": "icon/icon48.png",
"default_popup": "popup.html"
}
}
该配置文件设置了插件的名称、版本号、描述等基本信息，并指定了插件的图标和主要界面。
接下来，需要在 popup.html 中创建插件的主要界面，包括添加、编辑和删除书签的功能，下面是popup.html的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易书签管理器</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>简易书签管理器</h1>
<form>
<input type="text" id="url" placeholder="请输入书签URL" required>
<input type="text" id="name" placeholder="请输入书签名称" required>
<br>
<button type="submit" id="add">添加</button>
</form>
<ul id="list"></ul>
<script src="popup.js"></script>
</body>
</html>
该界面有一个表单，用于输入书签的URL和名称，并有一个「添加」按钮，用于将书签添加到列表中。列表会显示所有添加的书签，每个书签都有一个编辑按钮和删除按钮。
最后，需要在popup.js中实现插件的主要逻辑。该逻辑包括以下几个部分：
- 在页面加载完成后，获取所有已经保存的书签，并在列表中显示。
- 监听表单的提交事件，在提交时验证输入是否合法，并使用
chrome.tabs.create方法创建一个新的标签选项卡。 - 在列表中显示所有添加的书签，并为每个书签添加编辑和删除按钮，监听这两个按钮的点击事件。
下面是popup.js的代码：
let bookmarks = [];
function saveBookmark(url, name) {
bookmarks.push({ url: url, name: name });
chrome.storage.sync.set({ bookmarks: bookmarks });
}
function removeBookmark(index) {
bookmarks.splice(index, 1);
chrome.storage.sync.set({ bookmarks: bookmarks });
}
function loadBookmarks() {
chrome.storage.sync.get(['bookmarks'], function (result) {
if (result.bookmarks) {
bookmarks = result.bookmarks;
let list = document.getElementById('list');
for (let i = 0; i < bookmarks.length; i++) {
let item = document.createElement('li');
let link = document.createElement('a');
let edit = document.createElement('button');
let del = document.createElement('button');
link.textContent = bookmarks[i].name;
link.href = bookmarks[i].url;
edit.textContent = '编辑';
del.textContent = '删除';
edit.addEventListener('click', function () {
let newName = prompt('请输入新的书签名称：', bookmarks[i].name);
if (newName) {
bookmarks[i].name = newName;
chrome.storage.sync.set({ bookmarks: bookmarks });
link.textContent = newName;
}
});
del.addEventListener('click', function () {
removeBookmark(i);
item.remove();
});
item.appendChild(link);
item.appendChild(edit);
item.appendChild(del);
list.appendChild(item);
}
}
});
}
document.addEventListener('DOMContentLoaded', function () {
loadBookmarks();
let form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
let url = document.getElementById('url').value.trim();
let name = document.getElementById('name').value.trim();
if (url && name) {
saveBookmark(url, name);
let list = document.getElementById('list');
let item = document.createElement('li');
let link = document.createElement('a');
let edit = document.createElement('button');
let del = document.createElement('button');
link.textContent = name;
link.href = url;
edit.textContent = '编辑';
del.textContent = '删除';
edit.addEventListener('click', function () {
let newName = prompt('请输入新的书签名称：', name);
if (newName) {
saveBookmark(url, newName);
link.textContent = newName;
}
});
del.addEventListener('click', function () {
removeBookmark(bookmarks.findIndex(b => b.url === url));
item.remove();
});
item.appendChild(link);
item.appendChild(edit);
item.appendChild(del);
list.appendChild(item);
form.reset();
// 使用Tabs Manager API创建新的标签选项卡
chrome.tabs.create({ url: url });
}
});
});
该代码包含以下几个函数：
saveBookmark(url, name)：向 bookmarks 数组中添加新的书签，并将其保存到 Chrome 存储中，以便在浏览器关闭后也能够保留。removeBookmark(index)：从 bookmarks 数组中删除指定索引位置的书签，并将更新后的数组保存到 Chrome 存储中。loadBookmarks()：从 Chrome 存储中加载已有的书签，并将它们显示在页面上的列表中。DOMContentLoaded事件处理程序：在页面加载完成后执行的初始化操作，主要用于绑定表单提交事件和加载已有的书签列表。
该代码主要使用了以下 Chrome API：
chrome.storage：用于在浏览器中保存和读取数据。chrome.tabs.create：用于创建一个新的标签选项卡，并打开指定的 URL。document.addEventListener：用于监听 DOMContentLoaded 事件，以便在页面加载完毕后执行初始化操作。
下面我们来对代码进行逐行解析，以便各位对代码有更深层度的把控：
let bookmarks = [];
定义一个数组 bookmarks，用于存储书签对象。
function saveBookmark(url, name) {
bookmarks.push({ url: url, name: name });
chrome.storage.sync.set({ bookmarks: bookmarks });
}
定义一个名为 saveBookmark 的函数，接受两个参数 url 和 name，将这两个参数组成一个新的书签对象，添加到 bookmarks 数组中，并将更新后的 bookmarks 数组保存到 Chrome 存储中。
function removeBookmark(index) {
bookmarks.splice(index, 1);
chrome.storage.sync.set({ bookmarks: bookmarks });
}
定义一个名为 removeBookmark 的函数，接受一个参数 index，表示要删除的书签在 bookmarks 数组中的索引位置。使用 splice 方法从 bookmarks 数组中删除指定索引位置的元素，并将更新后的 bookmarks 数组保存到 Chrome 存储中。
function loadBookmarks() {
chrome.storage.sync.get(['bookmarks'], function (result) {
if (result.bookmarks) {
bookmarks = result.bookmarks;
let list = document.getElementById('list');
for (let i = 0; i < bookmarks.length; i++) {
let item = document.createElement('li');
let link = document.createElement('a');
let edit = document.createElement('button');
let del = document.createElement('button');
link.textContent = bookmarks[i].name;
link.href = bookmarks[i].url;
edit.textContent = '编辑';
del.textContent = '删除';
// 为编辑按钮绑定 click 事件处理程序
edit.addEventListener('click', function () {
let newName = prompt('请输入新的书签名称：', bookmarks[i].name);
if (newName) {
// 更新书签的名称
bookmarks[i].name = newName;
chrome.storage.sync.set({ bookmarks: bookmarks });
link.textContent = newName;
}
});
// 为删除按钮绑定 click 事件处理程序
del.addEventListener('click', function () {
// 删除指定索引位置的书签
removeBookmark(i);
item.remove();
});
item.appendChild(link);
item.appendChild(edit);
item.appendChild(del);
list.appendChild(item);
}
}
});
}
定义一个名为 loadBookmarks 的函数，用于从 Chrome 存储中读取已有的书签，并将它们显示在列表中。使用 chrome.storage.sync.get 方法读取存储中的 bookmarks 对象，如果该对象存在，则将其赋值给 bookmarks 数组，并遍历 bookmarks 数组，为每个书签创建一个 li 元素，并将其添加到列表元素中。对于每个书签，创建一个 a 元素来表示书签名称和 URL，以及一个编辑按钮和一个删除按钮，分别绑定 click 事件处理程序。
document.addEventListener('DOMContentLoaded', function () {
loadBookmarks();
let form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
let url = document.getElementById('url').value.trim();
let name = document.getElementById('name').value.trim();
if (url && name) {
saveBookmark(url, name);
let list = document.getElementById('list');
let item = document.createElement('li');
let link = document.createElement('a');
let edit = document.createElement('button');
let del = document.createElement('button');
link.textContent = name;
link.href = url;
edit.textContent = '编辑';
del.textContent = '删除';
edit.addEventListener('click', function () {
let newName = prompt('请输入新的书签名称：', name);
if (newName) {
saveBookmark(url, newName);
link.textContent = newName;
}
});
del.addEventListener('click', function () {
removeBookmark(bookmarks.findIndex(b => b.url === url));
item.remove();
});
item.appendChild(link);
item.appendChild(edit);
item.appendChild(del);
list.appendChild(item);
form.reset();
// 使用Tabs Manager API创建新的标签选项卡
chrome.tabs.create({ url: url });
}
});
});
在 DOMContentLoaded 事件处理程序中，首先调用 loadBookmarks 函数，将已有的书签列表加载到页面中。然后获取表单元素并为其绑定 submit 事件处理程序。在提交表单时，首先阻止默认行为，然后获取用户输入的 URL 和名称，并去除字符串两端的空格。如果 URL 和名称都不为空，则调用 saveBookmark 函数将新的书签添加到 bookmarks 数组中，并创建一个 li 元素来表示该书签，并将其添加到列表元素中。对于每个新书签，同样也创建一个 a 元素和编辑/删除按钮，并分别为这些按钮绑定 click 事件处理程序。
在编辑按钮的 click 事件处理程序中，弹出一个提示框，让用户输入新的书签名称。如果用户点击了“确定”按钮并输入了新名称，则更新书签对象的名称，并将更新后的 bookmarks 数组保存到 Chrome 存储中，同时更新对应的 a 元素的文本内容。
在删除按钮的 click 事件处理程序中，首先查找指定 URL 的书签在 bookmarks 数组中的位置（使用 findIndex 方法），然后调用 removeBookmark 函数删除该书签，并将对应的 li 元素从列表中移除。同时，也可以选择使用 Tabs Manager API 关闭当前标签选项卡或在后台静默执行某些其他操作。
最后，可以根据自己的喜好编写一些CSS样式，来美化插件的界面。下面是popup.css的代码：
h1 {
text-align: center;
font-weight: normal;
margin-bottom: 20px;
}
body {
width: 600px;
height: 300px;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
}
button {
padding: 10px 20px;
margin-right: 10px;
border: none;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
cursor: pointer;
}
button:focus {
outline: none;
}
a {
color: #333;
text-decoration: none;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
padding: 10px;
background-color: #f4f4f4;
border-radius: 5px;
}
当用户在表单中输入合法的书签URL和名称，并点击「添加」按钮时，除了将该书签保存到数组和本地存储中，并在列表中显示该书签外，还会调用chrome.tabs.create方法创建一个新的标签选项卡，打开该书签对应的网址。
这样，就完成了一个简单的书签管理器插件啦！
在本节中，我们详细介绍了 Google Chrome 插件的高级特性之一：Tabs Manager API。我们了解了 Tabs Manager API 的基本概念，明确了它在浏览器插件开发中的作用和重要性。然后，我们介绍了 Tabs Manager API 提供的主要方法，让开发者能够根据插件的需求来使用Tabs Manager API所提供的方法。
Tabs Manager API 是 Google Chrome 插件中一个重要且强大的功能，它为开发者提供了管理和控制浏览器标签页的能力。通过理解和运用 Tabs Manager API，开发者可以打造出更加强大、实用且个性化的浏览器插件，提升用户的浏览体验和工作效率。
本节课程源码 📥
链接: pan.baidu.com/s/1z26Ae3hG… 提取码: 3333