本文根据 Opera 官方文档编写,介绍如何使用扩展添加右键菜单。

通过 Opera 扩展,可以给网页上下文菜单添加选项,例如给链接右键菜单添加复制链接文本的菜单项,这样就可以方便的复制链接标题了。

要自定义菜单首先得在 manifest.json 文件里声明 contextMenus 权限,同样也可以在其中定义菜单前的图标。

{
  "name": "Context Menu Extension",
  ...
  "permissions": [
    "contextMenus"
  ],
  "icons": {
    "16": "icon-small.png"
  },
  ...
}

注意,有关扩展图标的设置都是在 icons 里声明,不同地方的图标大小不同,右键菜单的是 16x16。

创建菜单项

在后台脚本里通过 create() 方法创建菜单项,并在参数里定义菜单的相关属性。

chrome.contextMenus.create({
    title: "Google 搜索: %s",
    contexts: ["selection"],
    onclick: searchText
})

title 定义菜单项显示的文本;

contexts 定义菜单项在哪种情况下出现,这里的 selection 代表选中文字后的右键菜单。你肯定注意到 title 里的"%s"了,它代表的就是选中的文字。contexts 默认值是 page,页面空白处右键菜单,当然还有其他的值,image、video、page 等,更多请查看官方 API

onclick 定义点击菜单触发的函数。

控制点击菜单后的结果

这里,一但用户点击菜单,就会执行 serchText 函数,当然你必须定义它。

function searchText(info){
    var myQuery = encodeURI("https://www.google.com/search?q="+info.selectionText);
    chrome.tabs.create({url: myQuery});
}

当点击菜单时会产生一个 info 对象,存储了一系列的信息,我们这里 info.selectionText 就是获取选中的文字啦。

上面是一个在新标签 Google 搜索选中文字的里例子,你可以从 Opera 官网下载这个扩展。

标签: 扩展

添加新评论