谷歌插件开发：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>
    <meta charset="UTF-8">
    <title>简易书签管理器</title>
    <link rel="stylesheet" href="popup.css">
  </head>
    <h1>简易书签管理器</h1>
      <input type="text" id="url" placeholder="请输入书签URL" required>
      <input type="text" id="name" placeholder="请输入书签名称" required>
      <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的代码：
  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;
  color: #333;
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
  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

字段名	描述
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()	获取标签页的截图