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文件具体实现插件的功能;
<!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结果
遇到的问题:中文标题等乱码~应该是编码的问题 我全改成英文就好了
补充:
非官方插件无法运行:在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