Chrome Extension 通信常用 API 说明

最新推荐文章于 2024-07-29 15:56:34 发布

Felix皇子

最新推荐文章于 2024-07-29 15:56:34 发布

阅读量2.0k

点赞数 1

分类专栏：前端开发文章标签： Chrome插件

本文链接：https://blog.csdn.net/F_Felix/article/details/107577422

版权

本文详细介绍了Chrome扩展中的通信API，包括chrome.runtime.sendMessage、chrome.tabs.sendMessage等，讲解了如何进行扩展内部及跨扩展通信，同时提到了Chrome存储API，如storage.sync和storage.local，用于扩展的数据管理和同步。

摘要由CSDN通过智能技术生成

通信常用 API 说明

chrome.runtime.sendMessage

/**
 * 向您的扩展程序/应用或另一个扩展程序/应用中的其他事件监听者发送单个消息。
 * @param {string} extensionId 发送消息的扩展程序或应用的标识符，扩展的 id，省略就是当前扩展内部通信
 * @param {any} message
 * @param {object} options
 * @param {function} callback (response: any) => {} 响应
 */
chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)

chrome.runtime.onMessage

如果您在同一个文档中有一个以上的 onMessage 事件处理函数，只有其中一个可以发送响应。当事件处理函数返回时，该函数将失效，除非您在事件处理函数中返回 true，表示您希望通过异步方式发送响应（这样，与另一端之间的消息通道将会保持打开状态，直到调用了 sendResponse）。

/**
 * 当消息从扩展程序进程或者内容脚本中发送时产生，其实就是监听发送过来的消息
 * @param {function} callback (message: any, MessageSender: sender, sendResponse: function) => {}
 * @return {boolean} 如果您需要在事件监听器返回后再调用 sendResponse 请在事件监听器中返回 true
 */
chrome.runtime.onMessage.addListener(function callback(
    message,
    MessageSender,
    sendResponse
) {
   
    // message 调用脚本发送的消息
    // sendResponse (response: any) => {} 当您产生响应时调用（最多一次）的函数，参数可以是任何可转化为 JSON 的对象。
});

chrome.runtime.onMessageExternal

/**
 * 当消息从另一个扩展程序/应用发送时产生。不能在内容脚本中使用。
 * @param {function} callback (message: any, MessageSender: sender, sendResponse: function) => {}
 * @return {boolean} 如果您需要在事件监听器返回后再调用 sendResponse 请在事件监听器中返回 true
 */
chrome.runtime.onMessageExternal.addListener(function callback(
    message,
    MessageSender,
    sendResponse
) {
   
    // message 调用脚本发送的消息
    // sendResponse (response: any) => {} 当您产生响应时调用（最多一次）的函数，参数可以是任何可转化为 JSON 的对象。
});

chrome.runtime.getBackgroundPage

chrome.extension.getBackgroundPage

/**
 * 获取当前扩展程序/应用中正在运行的后台网页的 JavaScript window 对象。
 * 如果后台网页是事件页面，系统会确保在调用回调函数前它已经加载。如果没有后台网页，将会设置错误信息。
 * @params {function} callback (backgroundPage: Window) => {}
 */
 chrome.r