资讯专栏INFORMATION COLUMN

chrome扩展开发之旅 第三篇

shuibo / 1288人阅读

摘要:第三章目录简述右键菜单桌面提醒简述这部分对于前端的人来说是基础。已经将的权限开放了。制作实时查询美元价格的扩展代码部分部分查询美元当日价格图片请自行选用。

第三章目录

3.1 CSS简述

3.2 Browser Actions

3.3 右键菜单

3.4 桌面提醒

3.5 omnibox

3.6 Page Actions

3.1 CSS简述

这部分对于前端的人来说是基础。就不说了

3.2 Browser Action 图标设置

chrome一般会选择19像素的图片显示在工具栏,但若用户使用视网膜屏幕的计算机,chrome则会选择38像
素的图片。两种图片并非都要指定,指定一个,浏览器页会自动拉伸图片适应显示需要,但是可能会很难看。

  "browser_action": {
      "default_icon": {
          "19": "images/icon19_0.png",  //键值名19与38并不指代像素,只是作者自己为了标示
          "38": "images/icon38_0.png"   //chrome会自动识别像素,并予以选用
      }
    }

动态更改图标的方法
chrome.browserAction.setIcon(details,callback)

details的类型为对象,可以包含以下三种属性,分别是imagesData,path和tabId。

imagesData说明
imagesData的值既可以是imagesData也可以是对象。

{size:imagesData}
imagesData是指图片的像素数据,可以通过HTML的canvas标签获取。

path说明
path的值既可以是字符串也可以是对象,如果是对象,结构为{size:imagePath}

tabId说明
tabId的值限定了图标将在浏览哪个标签页时被更改。

callback回调函数没有可接收的结果

popup页面

当用户点击扩展图标时,弹出的页面被成为popup页面。

popup页面更多的用来展示结构,而并非处理数据。因为关闭popup页面等于关闭了相应的标签页。页面不会
继续运行,等再次打开popup页面时,所有的Dom与js空间遍历都会重新创建。

如果需要实时处理数据,则需要创建一个在后端一直运行的页面或者脚本(同时记得在manifest.json的
background域来声明)

几个注意项:

给出页面尺寸

不要模仿Chrome的原生UI

使用带有滚动条的DIV容器

设计一个更好的滚动条样式

屏蔽右键菜单

使用外部引用脚本

不要在popup页面的js空间变量中保存数据

标题和badge

将鼠标移至扩展图片上,等待片刻就会显示扩展的title。
设置方式如下

  "browser_action": {
      "default_title": "Turtle"
  },

动态设置方法

chrome.browserAction.setTitle({title: "This is a new title"});

badge常用来显示我们未阅读的数量等等,比如邮件,微博等。

设置方式

  chrome.browserAction.setBadgeBackgroundColor({color: "#0000ff"});
  chrome.browserAction.setBadgeText({text: "dog"});

注:背景颜色也可以用使用rgba。

2.3 右键菜单

首先,在manifest.json中的permissions域中声明contextMenus权限。

  "permissions": [
    "contextMenus"
  ]

第二步,设置右键菜单项上显示的扩展图标

  "icon": {
    "16": "icon16.png"
  }

三种操作方法:

chrome.contextMenus.create()

chrome.contextMenus.update()

chrome.contextMenus.remove()
举例如下:

  chrome.contextMenus.create({
    type: "normal",  //类型有normal,radio,checkbox,separator
    title: "menu A",
    id: "a", //标识每个选项
    parentId: "e",  //标示父级选项
    contexts: ["link"] //完整的取值还有all,page,frame,selection,link,editable,
                       //image,video,audio,launcher。表示右键菜单显示的时机
    });

update可以动态更改菜单属性,只需要指定需要更改的菜单id和所需要修改的属性即可,remove方法可以删
除指定的菜单栏选项。

3.4 桌面提醒 manifest部分
  "permissions": [
    "notifications"
  ];//manifest.json中声明
  "web_accessible_resources": [
  "icon48.png"
  ]  //对于桌面窗口中显示的图片,需要先行声明
js部分
  var notification = webkitNotiofications.createNotiofication(
    "icon48.png",
    "Notiofication Demo",
    "Merry Christmas"
    ); //建立一个提醒
  notification.show();//创建之后不会立即显示,需要调用show
4种事件

ondisplay

onerror

onclose

onclick
除此之外,还可以通过notification.cancel()主动关闭提醒窗口

omnibox

什么是omnibox呢,就是chrome 的地址栏,其实这是一个多功能输入框,google称之为omnibox。Google
已经将omnibox的权限开放了。

"omnibox": { "keyword": "hamster"} //首先在manifest.json声明并指定keyword

omnibox有4种事件

chrome.omnibox.onInputStarted

chrome.omnibox.onInputChanged

chrome.omnibox.onInputEntered

chrome.omnibox.onInputCancelled

Page Actions

Page Actions 与BrowserAction非常相似,除了没有badge意外,后者拥有的方法前者都有。另一个区别
在于,前者图标并非一直显示。所有前者可以自由控制显示或者隐藏,如下。

  chrome.pageAction.show(tabId);
  chrome.pageAction.hide(tabId);
制作实时查询美元价格的扩展

js代码部分

  function httpRequest(url, callback){
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
              callback(xhr.responseText);
          }
      }
      xhr.send();
  }

  function updateAmount(amount, exchange){
      amount = Number(amount);
      if(isNaN(amount) || !amount){
          exchange([{
              "content": "$1 = ¥"+price,
              "description": "$1 = ¥"+price
          },{
              "content": "¥1 = $"+(1/price).toFixed(6),
              "description": "¥1 = $"+(1/price).toFixed(6)
          }]);
      }
      else{
          exchange([{
              "content": "$"+amount+" = ¥"+(amount*price).toFixed(2),
              "description": "$"+amount+" = ¥"+(amount*price).toFixed(2)
          },{
              "content": "¥"+amount+" = $"+(amount/price).toFixed(6),
              "description": "¥"+amount+" = $"+(amount/price).toFixed(6)
          }]);
      }
  }

  function gotoYahoo(text, disposition){
      window.open("http://finance.yahoo.com/q?s=USDCNY=X");
  }

  var url = "http://query.yahooapis.com/v1/public/yql?q=select%20Rate%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDCNY%22)&env=store://datatables.org/alltableswithkeys&format=json";
  var price;

  httpRequest(url, function(r){
      price = JSON.parse(r);
      price = price.query.results.rate.Rate;
      price = Number(price);
  });

  chrome.omnibox.setDefaultSuggestion({"description":"Find current USD price."});

  chrome.omnibox.onInputChanged.addListener(updateAmount);

  chrome.omnibox.onInputEntered.addListener(gotoYahoo);

manifest部分

  {
      "manifest_version": 2,
      "name": "USD Price",
      "version": "1.0",
      "description": "查询美元当日价格",
      "background": {
          "scripts": [
              "js/background.js"
          ]
      },
      "icons": {
          "16": "images/icon16.png"
      },
      "omnibox": {
          "keyword": "usd"
      },
      "permissions": [
          "*://query.yahooapis.com/*"
      ]
  }

图片请自行选用。
扩展使用方法:载入扩展之后,在浏览器地址栏输入"usd",然后按空格键或者Tab键就可以使用了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91613.html

相关文章

  • chrome扩展开发之旅 第一篇

    摘要:扩展及应用介绍与区别介绍支持开发者为其编写各种各样的扩展与应用来扩充其功能。用处安装扩展之后,就会读取扩展中的文件。结语以上就是第一章的总结,接下来的笔记,敬请期待原书项目代码下载扩展及其应用开发 读书笔记介绍 寒假想自己做一个chrome扩展,便从图书馆借了这本书。同时,为了培养自己的好习惯,做沉淀,便读一章写一篇总结,全书总共10章,将会分为10篇博文。欢迎大家多多指正,也希望大家...

    lei___ 评论0 收藏0
  • chrome扩展开发之旅 第四篇

    摘要:目录结构书签历史管理扩展与应用标签书签第一步,在中声明书签的个属性,并不是每个书签都有这个对象,如书签文件夹就不具有属性。调整书签位置更新书签删除书签和空的书签分组删除包含书签的书签分组获取完整的书签内容书签的事件第一步,先行在中声明。 目录结构 4.1 书签 4.2 Cookies 4.3 历史 4.4 管理扩展与应用 4.5 标签 4.6 overridePages 4.1 书...

    jackwang 评论0 收藏0
  • chrome扩展开发之旅 第二篇

    摘要:跨域请求跨域问题,是开发中一直以来需要注意的问题。则发送通道的发送给监听此消息的外部扩展。完整方法此处,为必选参数,为回调函数。回调函数接收到的参数有三个,分别是和,即消息内容,消息发送者相关信息和相应函数。是发起消息的标签。 第二章简介 第二章较第一章复杂许多。书中虽寥寥21页,内容却也不少。涵盖了8个小节。 2.1 操作用户正在浏览的页面 2.2 跨域请求 2.3 常驻后台 2....

    shadajin 评论0 收藏0
  • chrome扩展开发之旅 第五篇

    摘要:目录结构下载网络请求代理系统信息本章讲解的是部分较为高级的,以供哪些有更高要求的读者阅读。对于目前的网络请求,笔记实用的功能包括阻断链接,更改和重定向。系统信息声明方法三个接口都提供了的方法 目录结构 5.1 下载 5.2 网络请求 5.3 代理 5.4 系统信息本章讲解的是部分较为高级的API,以供哪些有更高要求的读者阅读。 5.1 下载 声明 permissions: [ ...

    NotFound 评论0 收藏0
  • 【PWA学习与实践】(5)在Web中进行服务端消息推送

    摘要:本文是学习与实践系列的第五篇文章。实际上,消息推送与提醒是两个功能和。在这一篇里,我们先来学习如何使用进行消息推送。而当服务端要推送消息时,会使用私钥对发送的数据进行数字签名,并根据数字签名生成一个叫请求头。 《PWA学习与实践》系列文章已整理至gitbook - PWA学习手册,文字内容已同步至learning-pwa-ebook。转载请注明作者与出处。 本文是《PWA学习与实践》系...

    suemi 评论0 收藏0

发表评论

0条评论

shuibo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<