在chrome插件开发中，除了前一篇所述的基本特性外，还有一些与浏览器相关的功能，比如右键菜单（contextMenus）、以及桌面通知（notifications）等。

接下来，我们就这两项功能做个介绍：

一、右键菜单

什么是chrome插件里的右键菜单，来看下我开发的chrome插件-获取图片属性的截图：

chrome插件开发允许开发者在右键菜单里添加插件的功能项（可以多项），但需要满足以下两个条件：

  1. 在manifest.json的icons中添加16*16的图标，作为我们添加功能项的标识
  2. 在manifest.json的permissions中添加contextMenus，像这样：
"permissions": [
    "contextMenus"
]

要右键显示插件菜单，就必须创建、更新它。关于 contextMenus，chrome给开发提供了 create、update 方法。

chrome.contextMenus.create(createProperties, callback);
  • createProperties–必选，值为一个对象，包含了多个属性。分别是”type”, “checked”, “id”, “title”, “contexts”, “parentId”。
  • type–可选，值为数组。菜单类型，默认数组里的项为 “normal” , 还有 “checkbox”, “radio”, “separator”。
  • checked–可选，值为布尔值。当type为checkbox或者radio时，可指定此属性。
  • id–可选，值为整数。菜单项唯一标识符。
  • title–可选，值为字符串。菜单里的内容。
  • contexts–可选，值为数组。指定了用户右键页面里的相关内容时才会在菜单里出现插件项。默认数组里的项为 page，还有 “all”, “page”, “frame”, “selection”, “link”, “editable”, “image”, “video”, “audio”, “launcher”。
  • parentId–可选，值为整数或字符串。创建子菜单时，指定父菜单项标识符。
  • callback–设置改变后，执行的回调函数。
chrome.contextMenus.update(createProperties, callback);

update方法与create类似。当我们在页面里操作其他元素时，只需要更新创建的子菜单内容即可。比如我们创建了一个对图片右键，菜单里便能查看图片相关属性的选项。而当查看下一张图片时，更新图片属性即可。

了解了关于右键菜单的相关API后，我们在 manifest.json 引入 “background”属性，这个属性值是一个后台js文件，里面的内容用于创建右键菜单。而要操作页面内容，我们又要引入 “content_scripts”，通过它将操作的对象发送到后台js文件，然后在后台js中更新菜单项即可。

关于contextMenus，我写了一个对图片右键预览其属性的chrome插件！点击下载

二、桌面通知

曾经我在博文中提到过 HTML5-API-Notification，可惜它的浏览器支持度好像不是很高。先来看下我做的chrome插件-桌面提醒的截图：

和右键菜单一样，要开启桌面提醒，需在 manifest.json 的 permissions 中添加 notifications：

"permissions": [
    "notifications"
]

然后调用notifications中相关的API方法，chrome为开发者提供了 create，update，clear ，getAll，getPermissionLevel 方法。在这里，我们主要说下create，update，clear方法：

chrome.notifications.create(notificationId, options, callback);

以上方法表示创建标识符为notificationId的桌面提醒。

  • notificationId–桌面提醒的唯一标识符
  • options–值为对象。包含属性”type”，”iconUrl”，”title”，”message”，”contextMessage”，”buttons”等
  • type–必选，值为字符串。桌面提醒类型 , 可取值有 “basic”, “image”, “list”，”progress”。
  • iconUrl–可选，值为字符串。桌面提醒左侧图标。
  • title–可选，值为字符串。桌面提醒右侧标题。
  • message–可选，值为字符串。桌面提醒右侧正文。
  • contextMessage–可选，值为字符串。桌面提醒右侧浅灰色的字，一般作为提示类或附带文字。
  • buttons–可选，值为数组，数组每项为对象。对象包含”title”和”iconUrl”属性，它们的属性值分为字符串。表示桌面提醒的附加图标和文字说明。
chrome.notifications.update(notificationId, options, function callback);

以上方法表示更新指定的notificationId的桌面提醒，比如说倒计时关闭，我们就需要更新倒计时的秒数。

  • notificationId–桌面提醒的唯一标识符
  • options–与上面的create方法相同
chrome.notifications.clear(notificationId, callback);

以上方法表示关闭指定的notificationId的桌面提醒。

  • notificationId–桌面提醒的唯一标识符
  • callback–关闭后，执行的回调函数。

关于notifications，我写了一个每隔8s就弹出随机消息，并伴有声音提示的chrome插件！点击下载