• 发表于：
  • 更新于：
  • 分类： Opera

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

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

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

创建按钮

只需在 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);//监听当前显示标签改变

标签：