浏览器插件的编写

最新推荐文章于 2024-03-21 21:13:00 发布

tangsilian

最新推荐文章于 2024-03-21 21:13:00 发布

阅读量9.6k

点赞数 5

分类专栏：学习笔记文章标签：浏览器插件

本文链接：https://blog.csdn.net/tangsilian/article/details/53907117

版权

学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

tangsilian

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
浏览器插件的编写

0x00背景看到老东家安天的那篇AVL-insight开源情报分析平台的插件后，就想自己做一个插件玩玩。0x01需求做一个自动输入讲url生成二维码的插件。。。开发流程：用到的工具：notepad++一个完整的插件：由4个部分组成，分别是manifest.json、.js文件、图标和HTML文件，设计插件就是设计这4类文件。manifest.jsonmanifest.json的作用是定义插件
复制链接

扫一扫