将Chrome Extension加到快捷菜单中

来源：互联网发布：汽车导航仪网络不可用编辑：程序博客网时间：2024/06/04 23:36

转载请注明出处:http://blog.csdn.net/horkychen

接着上一篇Chrome插件的实作。

Step 1. 修改manifest.json,

a. 增加权限"contextMenus"和"notifications"

contextMenus -> 表示插件要操作快捷菜单

notifications -> 表示插件将弹出消息通知（处理菜单的click事件）

"permissions": ["contextMenus","tabs", "notifications"],

b. 增加backgroup page, 用于在加载时就创建快捷菜单。

"background_page":"background.html",

Step 2. 新建background.html,添加如下内容:

<html><head><title></title></head><body><script> function showNotification(){  webkitNotifications.createHTMLNotification("notification.html").show();}chrome.contextMenus.create( {      "type" :"normal",       "title": "2D BarCode Generator",      "contexts":["all"],      "onclick":function(){showNotification();}} );</script> </body></html>

整个页只做一件事，添加菜单项。其中的onclick所指定的函数，会将新的条码又HTML Notification窗口显示出来。notification.html就是显示的网页。

Step 3.新建notification.html，内容如下：

<html><head><title>2D Bar Code</title></head><body><img id="barcode_img"src ="http://barcode.tec-it.com/barcode.ashx?code=QRCode&modulewidth=4&unit=px&data=http%3A%2F%2Fblog.csdn.net/horkychen&dpi=120&imagetype=png&rotation=0&color=&bgcolor=&fontcolor=&quiet=0&qunit=mm&eclevel="alt="by TEC-IT"/><script type="text/javascript>   chrome. tabs.getSelected(null,function(tab) {      changeBarCode( tab.url);      }  ) ;function changeBarCode (url) {   var text = url;   if ( 0 == text.length )    {     text = "http://blog.csdn.net/horkychen";   }   var newPicUrl = "http://barcode.tec-it.com/barcode.ashx?code=QRCode&modulewidth=6&unit=px&data="+text+"&dpi=120&imagetype=png&rotation=0&color=&bgcolor=&fontcolor=&quiet=0&qunit=mm&eclevel=";   document.getElementById("barcode_img").src=newPicUrl;}</script> </body></html>

这个和index.html相似，差别仅在于changeBarCode直接接受URL,而没有提供文本框。

效果如下：

下面是弹出的消息框：

Step 4.重构，变更条码的代码有重复，我们需要提取公共函数来减少这种重复。所以新一个common.js文件:

指定changeBarCode接受两个参数，第一个表示新的URL地址，第二个是更新到哪个元件上。

function changeBarCode(url,strID){     var text = url;     if ( 0 == text.length )     {        text = "http://blog.csdn.net/horkychen";     }         var newPicUrl = "http://barcode.tec-it.com/barcode.ashx?code=QRCode&modulewidth=4&unit=px&data="+text+"&dpi=95&imagetype=png&rotation=0&color=&bgcolor=&fontcolor=&quiet=0&qunit=mm&eclevel=";     document.getElementById(strID).src=newPicUrl;}

对应修改notification.html的呼叫位置:

<script type="text/javascript">chrome.tabs.getSelected(null,function(tab)  {     refreshBarCode(tab.url);     }  ); function refreshBarCode(url){   changeBarCode(url,"barcode_img");}</script>

还有index.html中对应呼叫的位置:

<script type="text/javascript">  var tablink;  chrome.tabs.getSelected(null,function(tab)  {    tablink = tab.url;     document.getElementById("url").value = tablink;     document.getElementById("url").focus();     refreshBarCode();     }  );   function refreshBarCode()  {         var text = document.getElementById("url").value;       changeBarCode(text,"barcode_img");  } </script>

新的代码包可以在这里下载。