浏览器插件的编写

0x00背景
看到老东家安天的那篇AVL-insight开源情报分析平台的插件后，就想自己做一个插件玩玩。

0x01需求
做一个自动输入讲url生成二维码的插件。。。

开发流程：

用到的工具：notepad++

一个完整的插件：由4个部分组成，分别是manifest.json、.js文件、图标和HTML文件，设计插件就是设计这4类文件。

manifest.json

manifest.json的作用是定义插件的属性，例如名称、版本、类型等;

{  
  "name": "URLTOWHOIS", //程序名称 
  "version": "1.0",  //版本号
  "description": "whois-interface",  //描述
  "browser_action": {  
    "default_icon": "icon.png" ,
    "default_title": "URL",
    "default_popup": "DETAIL.html"  //是点击之后的弹窗操作
  } ,
  "permissions": [ //需要用到的权限
        "tabs", 
        "http://*/*", 
        "https://*/*", 
        "notifications"
      ],

   "manifest_version": 2  //一定要注意了，没有这个的话在最新版本的Chrome中无法安装插件
}

js文件

.js文件是一个跟浏览器互动的

function getCurrentTabUrl(callback)
{
    //获取当前标签的网址和标题
    chrome.tabs.getSelected(function(tab)
        {
            var tabUrl = tab.url;
            var tabTitle = tab.title;
            callback(tabUrl,tabTitle);
        });
}

//监听点击时间
document.addEventListener('DOMContentLoaded', function() {
     getCurrentTabUrl(function(tabUrl,tabTitle)
        {
             var website = document.getElementById('website');
             var title = document.getElementById('title');
             website.textContent = "URL: " + tabUrl;
             title.textContent = "TILE: " + tabTitle;
             //生成二维码
            jQuery('#QRcode').qrcode(tabUrl);
        });

});

HTML文件

HTML文件具体实现插件的功能;

<!DOCTYPE html>
<html>
<head>
<title>Website2QRcode</title>

<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript" src="DETAIL.js"></script>
</head>

<body>
<p id="website">
    http://blog.csdn.net/tangsilian
</p>
<p id="title">

</p>
<div id="QRcode"></div>

</body>
</html>

写完几个文件后，就可以将插件载入浏览器中试用一下。首先将它们整理到同一个文件夹中，然后在Chrome的工具栏中选择“扩展程序”，进入扩展管理页，在右侧选择“开发人员模式”，再点击“载入正在开发的扩展程序”按钮，定位到这个文件夹，将整个文件夹载入Chrome中。

实现效果如下：

这里写图片描述

0x02结果
遇到的问题：中文标题等乱码~应该是编码的问题我全改成英文就好了

参考：
http://homepage.yesky.com/62/11206062.shtml
http://blog.csdn.net/pleasecallmewhy/article/details/9855013
http://www.cnblogs.com/guogangj/p/3235703.html

浏览器插件的编写

manifest.json

js文件

HTML文件

推荐阅读