谷歌开发常用API（V3版本）

扶风吹细柳、

已于 2024-03-05 15:40:06 修改

阅读量1.8k

点赞数 25

文章标签：前端 java javascript chrome

于 2024-01-15 11:49:09 首次发布

本文链接：https://blog.csdn.net/qq_45106093/article/details/135597701

版权

我将我认为日常开发中可能会用到的API进行了提取，如果在下列中未找到需要的API接口，可前往官方API接口文档中进行查看。

地址：API接口文档

chrome.tabs（标签页）

您可以使用此 API 在浏览器中创建、修改和重新排列标签页。Tabs API 不仅提供操控和管理标签页的功能，还能检测标签页的语言、截取屏幕截图，以及与标签页的内容脚本通信。

权限声明

大多数功能无需任何权限即可使用。例如：创建新标签页、重新加载标签页、导航到其他网址，等等。

开发者在使用 Tabs API 时应注意以下三项权限：

标签页权限（tabs）

这个声明通常在扩展程序需要访问、修改或控制浏览器标签页（tabs）的时候进行。例如，如果扩展程序需要读取当前打开的标签页列表，或者需要打开、关闭、重新加载标签页，那么就需要这个权限。

  {
    "name": "My extension",
    ...
    "permissions": [
      "tabs"
    ],
    ...
  }

主机权限（host_permissions）

这个声明通常在扩展程序需要与特定的网站进行通信的时候进行。在这个例子中，扩展程序被授权可以与所有http和https协议的网站进行通信。host_permissions允许扩展程序向特定的网站发送跨域请求，或者在这些网站上注入脚本。

  {
    "name": "My extension",
    ...
    "host_permissions": [
      "http://*/*",
      "https://*/*"
    ],
    ...
  }

当前活动的标签页（activeTab）

这个声明通常在扩展程序需要与当前活动的标签页进行交互的时候进行。这个权限允许扩展程序访问和修改当前活动的标签页，包括读取网页内容、插入或执行代码等。不过需要注意的是，这个权限只在扩展程序被用户明确触发（例如点击扩展程序的浏览器工具栏按钮）的时候才会生效。

  {
    "name": "My extension",
    ...
    "permissions": [
      "activeTab"
    ],
    ...
  }

常用方法

Tabs API

打开某个标签

扩展程序的常见模式是在安装扩展程序后在新标签页中打开初始配置页面。以下示例展示了如何执行此操作。(此示例不需要任何权限。)

chrome.runtime.onInstalled.addListener(({reason}) => {
  if (reason === 'install') { //在插件第一次被安装时自动弹出我们的配置页面
    chrome.tabs.create({
      url: "onboarding.html"
    });
  }
});

获取当前窗口打开的所有标签

chrome.tabs.query({}).then(resp=>{
    console.log(resp)
})

如果需要获取当前用户真正浏览的窗口，也可以设置条件

let queryOptions = { active: true, lastFocusedWindow: true };
chrome.tabs.query(queryOptions).then(resp=>{
    console.log(resp)
})

向指定标签页传递信息

  const response = await chrome.tabs.sendMessage(tab.id, message);

向标签页注入脚本

chrome.tabs.executeScript({  
    file: 'injected.js' // 相对于扩展程序根目录的路径  
}, function() {  
    console.log('脚本已注入到当前标签页');  
});

或者，如果你想注入一段内联脚本

chrome.tabs.executeScript({  
    code: 'document.body.bgColor="red"' // 直接执行的JavaScript代码  
}, function() {  
    console.log('内联脚本已注入到当前标签页');  
});

常用事件

监听标签页更新事件

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {  
    if (changeInfo.status == 'complete') {  
        console.log('标签页 ' + tab.url + ' 已完成加载');  
        // 在这里执行标签页加载完成后的操作  
    }  
});

chrome.windows（窗口）

权限声明

如果您需要访问 tabs.Tab 的 url、pendingUrl、title 或 favIconUrl 属性，您必须在清单中声明 "tabs" 权限。

{
  "name": "My extension",
  ...
  "permissions": ["tabs"],
  ...
}

常用方法

Windows API

打开一个新窗口

chrome.windows.create({  
    url: "https://www.example.com", // 指定要打开的网址  
    type: "normal",                 // 窗口类型，可以是 'normal', 'popup', 'panel', 或 'detached_panel'  
    width: 800,                     // 窗口宽度  
    height: 600                    // 窗口高度  
}, function(window) {  
    console.log('新窗口已打开，窗口ID是: ' + window.id);  
});

获取窗口列表

chrome.windows.getAll(function(windows) {  
    for (var i = 0; i < windows.length; i++) {  
        console.log('窗口ID: ' + windows[i].id + ', 窗口标题: ' + windows[i].title);  
    }  
});

常用事件

监听窗口大小调整

// 定义一个回调函数，该函数将在窗口边界发生变化时被调用  
function handleBoundsChanged(windowId, boundsInfo) {  
  console.log('Window bounds have changed for window:', windowId);  
  console.log('New bounds:', boundsInfo);  
}  
  
// 为 onBoundsChanged 事件添加一个监听器  
chrome.windows.onBoundsChanged.addListener(handleBoundsChanged);

chrome.contextMenus（右键菜单）

权限声明

您必须在扩展程序的清单中声明“contextMenus”权限才能使用 API。

{
  "name": "My extension",
  ...
  "permissions": [
    "contextMenus"
  ],
  "icons": {
    "16": "icon-bitty.png",
    "48": "icon-small.png",
    "128": "icon-large.png"
  },
  ...
}

常用方法

ContextMenus API

向右键菜单添加一个自定义项

chrome.contextMenus.create({  
  title: "处理选定文本",  
  contexts: ["selection"], // 仅在选中文本时显示  
  onclick: function(info, tab) {  
    // 处理选定的文本  
    console.log("选定的文本是: " + info.selectionText);  
    // 在这里可以执行其他操作，比如发送选定的文本到后台脚本处理  
  }  
});

获取上下文菜单项信息

chrome.contextMenus.getInfo("myMenuItem", function(info) {  
  console.log("Menu item info: " + JSON.stringify(info));  
});

常用事件

监听上下文菜单项点击

function handleContextMenuClicked(info, tab) {  
  console.log('Context menu item clicked:');  
  console.log('Menu Item ID:', info.menuItemId);  
  console.log('Parent Menu Item ID (if any):', info.parentMenuItemId);  
  console.log('Selection Text (if any):', info.selectionText);  
  console.log('Page URL:', tab.url);  
}  
  
chrome.contextMenus.onClicked.addListener(handleContextMenuClicked);

chrome.bookmarks（书签）

权限声明

{
  "name": "My extension",
  ...
  "permissions": [
    "bookmarks"
  ],
  ...
}

常用方法

Bookmarks API

创建一个书签或文件夹

chrome.bookmarks.create({  
  parentId: "1", // 书签栏的ID，通常是"1"或其他特定于浏览器的值  
  title: "我的新书签",  
  url: "https://www.example.com"  
}, function(bookmark) {  
  console.log("新书签已添加，ID是: " + bookmark.id);  
});

移除一个书签或文件夹

chrome.bookmarks.remove("bookmarkId"); // 替换 "bookmarkId" 为实际的书签ID

获取书签列表

chrome.bookmarks.getTree(function(bookmarkTreeNodes) {  
  console.log(bookmarkTreeNodes); // 打印整个书签树  
});

更新一个书签的属性

chrome.bookmarks.update("bookmarkId", { title: "更新后的标题" });

获取文件夹的所有子项

chrome.bookmarks.getChildren("folderId", function(children) {  
  console.log(children);  
});

常用事件

监听书签变化事件

chrome.bookmarks.onChanged.addListener(function(id, changeInfo) {  
  console.log("Bookmark changed: " + id);  
  console.log("Changes: " + JSON.stringify(changeInfo));  
});

chrome.history（浏览记录）

权限声明

{
  "name": "My extension",
  ...
  "permissions": [
    "history"
  ],
  ...
}

常用方法

History API

查询用户的浏览记录

chrome.history.search({  
  text: '', // 搜索的文本，留空则返回所有历史记录  
  startTime: 0,  
  maxResults: 100  
}, function(historyItems) {  
  for (var item of historyItems) {  
    console.log("访问的URL: " + item.url);  
    console.log("访问时间: " + item.lastVisitTime);  
  }  
});

获取某个URL的所有访问信息

chrome.history.getVisits({ url: "http://example.com" }, function(visits) {  
  console.log(visits);  
});

chrome.webRequest（网络请求）

权限声明

{
  "name": "My extension",
  ...
  "permissions": [
    "webRequest"
  ],
  "host_permissions": [
    "*://*.google.com/*"
  ],
  ...
}

常用方法

WebRequest API

阻止特定网络请求

chrome.webRequest.onBeforeRequest.addListener(  
  function(details) {  
    if (details.url.includes("example.com")) {  
      return {cancel: true}; // 阻止请求  
    }  
  },  
  {urls: ["<all_urls>"]}, // 监听所有URL  
  ["blocking"] // 必须指定 "blocking" 以能够阻止请求  
);