chrome.notifications.create有哪些用法

chrome.notifications.create 是 Chrome 扩展程序 API 的一部分,它允许开发者创建桌面通知。这个 API 可以显示一个通知,通知可以包含标题、消息、图标和其它选项。以下是一些 chrome.notifications.create 的用法示例:

基本用法

javascript 复制代码
chrome.notifications.create(
    'notification-id', // 唯一标识符
    {
        type: 'basic', // 通知类型
        iconUrl: 'icon.png', // 图标URL
        title: 'Hello World', // 通知标题
        message: 'This is a simple notification.' // 通知消息
    },
    function callback(createdNotificationId) {
        // 通知创建成功后的回调
        console.log('Notification created with id: ' + createdNotificationId);
    }
);

带按钮的通知

javascript 复制代码
chrome.notifications.create(
    'notification-id',
    {
        type: 'basic',
        iconUrl: 'icon.png',
        title: 'Notification with buttons',
        message: 'Do you like this notification?',
        buttons: [
            { title: 'Yes' },
            { title: 'No' }
        ],
        priority: 2
    },
    function callback(createdNotificationId) {
        console.log('Notification created with id: ' + createdNotificationId);
    }
);

图片通知

javascript 复制代码
chrome.notifications.create(
    'notification-id',
    {
        type: 'image',
        iconUrl: 'icon.png',
        title: 'Image Notification',
        message: 'Check out this image.',
        image: 'image-url.png', // 图片URL
        priority: 1
    },
    function callback(createdNotificationId) {
        console.log('Notification created with id: ' + createdNotificationId);
    }
);

列表通知

javascript 复制代码
chrome.notifications.create(
    'notification-id',
    {
        type: 'list',
        iconUrl: 'icon.png',
        title: 'List Notification',
        message: 'Here is a list of items:',
        items: [
            { title: 'Item 1', message: 'Description of item 1' },
            { title: 'Item 2', message: 'Description of item 2' }
        ],
        priority: 0
    },
    function callback(createdNotificationId) {
        console.log('Notification created with id: ' + createdNotificationId);
    }
);

进度通知

javascript 复制代码
chrome.notifications.create(
    'notification-id',
    {
        type: 'progress',
        iconUrl: 'icon.png',
        title: 'Progress Notification',
        message: 'Downloading something...',
        progress: 50 // 进度值,范围0-100
    },
    function callback(createdNotificationId) {
        console.log('Notification created with id: ' + createdNotificationId);
    }
);

通知事件监听

javascript 复制代码
chrome.notifications.onClicked.addListener(function(notificationId) {
    console.log('Notification clicked: ' + notificationId);
});

chrome.notifications.onClosed.addListener(function(notificationId) {
    console.log('Notification closed: ' + notificationId);
});

chrome.notifications.onButtonClicked.addListener(function(notificationId, buttonIndex) {
    console.log('Button clicked on notification: ' + notificationId + ', button index: ' + buttonIndex);
});

请注意,由于浏览器安全策略和用户体验的考虑,Chrome 扩展程序的通知功能可能受到一些限制,并且需要在扩展程序的清单文件中声明权限。此外,chrome.notifications.create API 可能在不同版本的 Chrome 中有所不同,因此建议查阅最新的 Chrome 开发者文档 以获取最准确的信息。

相关推荐
lichenyang4534 分钟前
HarmonyOS HMRouter 接入记录:从普通 Tab Demo 到路由跳转
前端
木斯佳25 分钟前
前端八股文面经大全:腾讯WXG暑期前端一面(2026-05-15)·面经深度解析
前端·面试·笔试
canonical_entropy1 小时前
NOP Chaos Flux 架构演变史:从 AMIS 重写到现代低代码运行时
前端·aigc·ai编程
张元清1 小时前
useEffect 之外:专门处理异步、深比较和 SSR 的 Effect Hook
前端·javascript·面试
小小小小宇2 小时前
前端双Token机制无感刷新(二)
前端
zhangxingchao2 小时前
AI Agent 基础问题系统整理:从 LangChain、LangGraph、MCP 到 Agent 架构、记忆、工具调用与评估体系
前端·人工智能·后端
Moment2 小时前
AI 为什么总喜欢写防御性代码?
前端·后端·面试
浑手营销2 小时前
浑手科技案例分享:133个精准询盘短视频玩法
前端·人工智能·科技
IT_陈寒2 小时前
SpringBoot自动配置的坑,差点让我加班到天亮
前端·人工智能·后端
LucianaiB3 小时前
【Dify + EdgeOne】你奶奶也会做一个“智票通”,轻松票据自定义提取+防数据泄露
前端·后端