将Chrome Extension加到快捷菜单中

最新推荐文章于 2022-12-31 16:56:14 发布

Horky

最新推荐文章于 2022-12-31 16:56:14 发布

阅读量3.6k

点赞数

分类专栏： JavaScript WebKit 文章标签： extension chrome notifications permissions function generator

本文链接：https://blog.csdn.net/HorkyChen/article/details/7754888

版权

WebKit 同时被 2 个专栏收录

68 篇文章 5 订阅

订阅专栏

JavaScript

19 篇文章 2 订阅

订阅专栏

转载请注明出处: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>

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

Horky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
将Chrome Extension加到快捷菜单中

转载请注明出处:http://blog.csdn.net/horkychen接着上一篇Chrome插件的实作。Step 1. 修改manifest.json, a. 增加权限"contextMenus"和"notifications" contextMenus -> 表示插件要操作快捷菜单 notifications -> 表示插件将弹出消息通知（处
复制链接

扫一扫

专栏目录