GM_notification

下面讲下 GM_notification 的用法

Tampermonkey官方文档摘录如下（2020-3-28）

GM_notification(details, ondone), GM_notification(text, title, image, onclick)

Shows a HTML5 Desktop notification and/or highlight the current tab.
details can have the following attributes:

• text - the text of the notification (optional if highlight is set)
• title - the notificaton title (optional)
• image - the image (optional)
• highlight - a boolean flag whether to highlight the tab that sends the notfication (optional)
• timeout - the time after that the notification will be hidden (optional, 0 = disabled)
• ondone - called when the notification is closed (no matter if this was triggered by a timeout > or a click) or the tab was highlighted (optional)
• onclick - called in case the user clicks the notification (optional)
  All parameters do exactly the same like their corresponding details property pendant.

翻译

GM_notification(details, ondone), GM_notification(text, title, image, onclick)
显示一个HTML5形式的桌面通知，并且可以激活发出通知的标签页
details 可以有以下几个属性
text - string- 通知的文字
title -string- 通知的标题
image -string- 图片(可选)
highlight - boolean- 布尔值标识，是否激活显示发出这个通知的标签页(可选)
timeout - int- 通知多长时间后消失(可选，0 = 不消失)
ondone - function- 通知关闭(不管是超时还是点击触发)或者关联标签页激活之后执行(可选)
onclick -function- 用户点击通知后执行(可选)
所有参数做的事 和 属性字面意义 是一样的

补充说明

• image
  是图片的地址，
  可以是本地文件地址(允许访问本地文件情况下)，比如
  'file:///C:/Users/jon/Downloads/img1.jpg'
  可以是网络文件地址，比如
  'https://www.baidu.com/img/baidu_jgylogo3.gif'
  也可以是 base64 数据，具体数据不在这里粘贴了。

但是，叔叔要说但是了，
在<img>标签src里面，如果是base64类型，能够直接使用 svg元素，
但是这里目前就不支持。
其他的比如什么gif,png,jpg的图片转为base64之后都能够完美支持。

• highlight
  直接翻译就是“高亮”，实际意思是“激活”或者“重新获得焦点”，跟标签页“focus”事件差不多。
  这里说得再多也没有什么意义，你直接写个例子运行一下就知道怎么回事了。

• 通知权限
  如果是网页要发出通知，是需要申请通知权限的。
  但是这里是使用扩展通知的API。目前是不需要申请权限的。
  怎么爽就怎么发。
  默认安装扩展的时候，默认已经给了Tampermonkey发通知的权限了。

例子

去吧，拿着例子一边玩去吧~~

function doit(message) {
    GM_notification({
        title: location.host,
        text: message,
        image: 'file:///C:/Users/jon/Downloads/黄6.jpg',
        timeout: 2000,
        // highlight: true,
        ondone: ()=>{alert('来自 ondone 事件')},
        onclick: ()=>{alert('来自 onclick 事件')}
    })
}

document.querySelector("#doit").addEventListener('click', ()=>{doit('woonigh 最帅！！！')});