【教程向】从零开始创建浏览器插件（四）探索Chrome扩展的更多常用API

news2024/9/29 15:26:18

探索Chrome扩展的更多常用API

在Chrome扩展开发中，除了最基础的API外，Chrome还提供了一系列强大的API，允许开发者与浏览器的各种功能进行交互。本文将介绍其中几个常用的API，并提供详细的示例代码帮助您开始利用这些API。
在这里插入图片描述

书签API（`bookmarks`）

Chrome的bookmarks API允许扩展访问和修改用户的书签。以下是一个使用bookmarks API创建新书签的示例：

示例代码：创建新书签

// background.js 或者其他可以运行API调用的脚本
chrome.bookmarks.create({
    'parentId': "1",
    'title': "My Favorite Site",
    'url': "https://www.example.com/"
}, function(newBookmark) {
    console.log("添加的书签: ", newBookmark);
});

在上面的例子中，parentId指定了要在哪个书签文件夹下创建新书签，title和url是新书签的名称和链接。

通知API（`notifications`）

notifications API使扩展可以显示通知给用户。下面的示例展示了如何创建一个简单的通知：

示例代码：显示通知

// background.js 或者其他适合的地方
chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icon.png',
    title: '提醒',
    message: '这是一个通知测试！',
    buttons: [{ title: '按钮1'}, {title: '按钮2'}],
    priority: 0
}, function(notificationId) {
    console.log("显示通知: ", notificationId);
});

上下文菜单API（`contextMenus`）

contextMenus API允许扩展向Chrome浏览器的上下文菜单（右键菜单）添加自定义项。下面的代码示例向上下文菜单添加了一个新项，当用户在网页上右键时可见：

示例代码：创建上下文菜单项

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        "id": "sampleContextMenu",
        "title": "使用我的扩展处理",
        "contexts": ["selection"]
    });
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
    if (info.menuItemId == "sampleContextMenu") {
        console.log("你选择了一些文本：" , info.selectionText);
        // 在这里添加你想对选中文本执行的操作
    }
});

在这个示例中，我们首先通过chrome.contextMenus.create方法创建了一个新的上下文菜单项，只有当用户选中页面上的文本时才会显示。然后，我们使用chrome.contextMenus.onClicked监听器来响应用户的点击操作，当用户点击我们的菜单项时，我们简单地记录了选择的文本。

标签页API（`tabs`）

tabs API让扩展可以创建、修改和移动浏览器标签页。以下是使用此API查询当前激活标签页的示例：

示例代码：查询当前激活标签页

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var currentTab = tabs[0]; // 在这里拿到当前的标签页
    console.log(currentTab.url); // 输出当前标签页的网址
});

这个API非常有用，比如在需要从当前标签页抓取信息或对当前页面执行脚本的场景中。

存储API（`storage`）

Chrome扩展的storage API提供了一个便利的方式来存储和检索扩展数据。与其他浏览器存储解决方案（如localStorage）相比，storage API功能更强大，支持异步存取，并且对数据的大小限制更加宽松。

示例代码：存储和检索数据

// 存储数据
chrome.storage.sync.set({'key': 'value'}, function() {
    console.log("保存成功");
});

// 检索数据
chrome.storage.sync.get('key', function(result) {
    console.log("检索到的数据：", result.key);
});

通过chrome.storage.sync，数据不仅被保存在本地，同时也会与用户的Google账号同步（如果登录的话），因此可以跨设备共享数据。

消息传递

Chrome扩展提供了一种强大的消息传递系统，允许不同的扩展组件（如背景脚本、内容脚本、弹出页面等）之间进行通信。这对于创建具有多个组件并需要在这些组件之间共享数据的扩展非常有用。

示例代码：内容脚本与背景脚本之间的消息传递

// background.js
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting === "hello") {
            sendResponse({farewell: "goodbye"});
        }
    });

// content.js
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
    console.log(response.farewell);
});