浏览器插件的编写

0x00背景

看到老东家安天的那篇AVL-insight开源情报分析平台chrome浏览器插件后,就想自己做一个插件玩玩。

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文件具体实现插件的功能;




Website2QRcode







http://blog.csdn.net/tangsilian

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

实现效果如下:

浏览器插件的编写_第1张图片

浏览器插件的编写_第2张图片

0x02结果

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

浏览器插件代码

补充:

非官方插件无法运行:在win上写入注册表即可

进一步的hacker:
https://evi1cg.me/archives/Hack_With_Chrome_Extension.html

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

你可能感兴趣的:(学习笔记)