将Chrome Extension加到快捷菜单中

心已赠人 2022-06-09 02:21 219阅读 0赞

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

接着[上一篇Chrome插件的实作][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,而没有提供文本框。

效果如下：

![1342502008_4960.png][]

下面是弹出的消息框：

![1342502020_7430.png][]

** 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的呼叫位置:

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

新的代码包可以在这里[下载][Link 1]。

[Chrome]: http://blog.csdn.net/horkychen/article/details/7747714
[1342502008_4960.png]: https://img-my.csdn.net/uploads/201207/17/1342502008_4960.png
[1342502020_7430.png]: https://img-my.csdn.net/uploads/201207/17/1342502020_7430.png
[Link 1]: http://download.csdn.net/detail/horkychen/4440720