#扩展#

Opera15 扩展:自定义右键菜单

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

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

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

{
  "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 官网下载这个扩展。

Opera15 扩展:扩展内脚本间消息传递

本文根据 Opera 官方文档编写,介绍扩展中各脚本消息传递相关的内容。

消息传递有两种方式,一种是简单的通信,一种是高级的通信。

简短的通信

直接通过 runtime.sendMessage()tabs.sendMessage() 方法发送消息,通过用 runtime.onMessage() 方法接收消息。

后台脚本消息发送消息用 tabs.sendMessage(),内容脚本发送消息用 runtime.sendMessage()
<!--more-->

一个简单的例子:

点击按钮发送消息给当前标签

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.query({currentWindow: true, active: true}, function(tab) {//选择当前浏览的标签
       chrome.tabs.sendMessage(tab[0].id, {hi: 'hi,content'}); //发送消息
    });
});

内容脚本接收到消息,并发送消息给后台脚本

chrome.runtime.onMessage.addListener(//监听消息
    function (request, sender){
        alert(request.hi);      chrome.runtime.sendMessage({hello:'hello,background'});//发送消息
});

同样的方法,后台脚本接受消息

chrome.runtime.onMessage.addListener(//监听消息
    function (request, sender) {
        chrome.browserAction.setBadgeText({text: "ok"}); //在按钮徽章上显示ok
});

更高级的通信

首先需要用 runtime.connect()tabs.connect() 建立一个连接,和简单的通信一样,前者用于内容脚本,后者用于后台脚本。作为连接的另一方则需要通过 runtime.onConnect.addListener()监听是否有连接被创建。

一个简单的例子

内容脚本建立连接

var port = chrome.runtime.connect({name: "敲门"});//建立连接
port.postMessage({joke: "敲门"});
port.onMessage.addListener(function(msg) {
  if (msg.question == "是谁?")
    port.postMessage({answer: "小白兔"});
  if (msg.question == "请进")
    port.postMessage({answer: "谢谢"});
});

后台脚本接受消息

chrome.runtime.onConnect.addListener(function(port) {//监听是否有连接
    port.onMessage.addListener(function(msg) {
      if (msg.joke == "敲门")
        port.postMessage({question: "是谁?"});
      else if (msg.answer == "小白兔")
        port.postMessage({question: "请进"});
    });
}

Opera15 扩展:浏览器按钮(button-popups-badges)

本文根据 Opera 官方文档编写,介绍扩展中“浏览器按钮”相关的内容。

Opera 扩展中按钮有两种形式,一种是 Browser Action,一种是 Page Action。

Browser Action 针对的是整个浏览器,可以控制窗口内的所有标签。Page Action 则只对当前显示的标签有效,所以它是显示在地址栏内的。
<!--more-->

创建按钮

只需在 manifest.json 文件中声明

"browser_action": {
  "default_icon": "icon.png",//图标
  "default_title": "my button",//提示
  "default_popup": "popup.html"//弹出内容
}
"page_action": {
  "default_icon": "icon.png",
  "default_title": "My Sample Extension", 
  "default_popup": "popup.html"
},

按钮徽章(badges)

在按钮右下角可以显示一些文字,相关属性应该在后台脚本(background.js)中设置,Page Action 没有这个特性。

Chrome.browserAction.setBadgeBackgroundColor({"#ff0000"}): //设置背景颜色
Chrome.browserAction.setBadgeText("hell")//设置文字,最多4个字符

按钮点击事件

监听按钮点击事件的代码同样需要写在在后台脚本中

chrome.browserAction.onClicked.addListener(function(){
  console.log('This button was clicked!');
});

按钮弹出内容(popups)

弹出内容显示的就是一个 html 页,在 manifest.json 文件中声明就可以了

显示 Page Action

Page Action 默认是不显示的,通过 show() 方法显示,隐藏则是 hide() 方法。虽然它只对当前显示的标签有效,但要显示/隐藏还是需要传入当前标签的ID

//如果地址中包含123则显示 Page Action
function checkURL(tabID, changeInfo, tab){
    if (tab.url.indexOf('123')> -1){
    chrome.pageAction.show(tabID);
  }
}
chrome.tabs.onUpdated.addListener(checkURL);//监听当前显示标签改变