Chrome扩展程序开发入门指南

为什么选择Chrome扩展程序而不是其他？

第一、使用Chrome内核的浏览器占有率高（包括微软最近也推出了Chrome内核的浏览器Edge）；

第二、上手容易，只需要JS知识就可以开发，如果再熟悉点HTML和CSS那就更好了！

Chrome扩展程序也被叫做Chrome插件，虽然这种叫法并不严谨，但是通常情况，我们说的Chrome插件和Chrome扩展程序其实都是指Chrome扩展程序。

下面以开发一个获取网站IP的扩展程序为例：

插件原理：my.js获取到网站域名将数据发送给bg.js，bg.js通过api获取到ip，然后输出。

开发不需要专门的IDE，随便一个文本编辑工具即可！

1.manifest.json文件

{
	// manifest.json文件的版本，目前这个必须写2
	"manifest_version": 2,
	// 插件的名称
	"name": "demo",
	// 插件的版本
	"version": "1.0.0",
	// 插件的描述
	"description": "这是一个Chrome扩展程序",
	// 插件的图标，当然只做一个也可以
	"icons":{
		"16": "img/icons/16.png",
		"48": "img/icons/48.png",
		"128": "img/icons/128.png"
	},
	// 常驻后台的JS或页面
	"background":{
		// 可以指定html页面，也可以指定js文件
		//"page": "bg.html"
		"scripts": ["js/bg.js"]
	},
	// 浏览器右上角图标设置
	"browser_action":{
		// 图标
		"default_icon":{
			"19": "img/icons/19.png",
			"38": "img/icons/38.png"
		},
		// 标题
		"default_title": "这是一个Chrome插件",
		// 点击图标时打开的页面
		"default_popup": "popup.html"
	},
	// 需要加载到页面中的JS文件（CSS也可以）
	"content_scripts": 
	[
		{
			// 匹配的网址，"<all_urls>" 代表匹配所有网址，即用浏览器打开任意网站，都会在网站里面自动加载我们的js（或css）文件
			"matches": ["<all_urls>"],
			// 加载自定义的JS文件，多个JS按顺序加载
			"js": ["js/jquery.min.js", "js/my.js"],
			// 加载自定义的CSS文件
			//"css": ["css/my.css"],
			// 文件被加载的时间点，可选值： "document_start", "document_end", "document_idle"
			"run_at": "document_start"
		}

	],
	// 插件的主页
	"homepage_url": "https://www.php.icu/"
  
	// 当然还有许多可以配置的参数......此处省略。
}

2.bg.js文件

bg.js是常驻进程的文件，从浏览器打开即被加载。

无需任何设置，bg.js即可跨域。

常驻进程文件和非常驻进程文件之间是可以通信的。

document.write("<script type='text/javascript' src='js/jquery.min.js'></script>");
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  $.ajax({url:'http://ip-api.com/json/' + request.domain,success:function(res){alert(res.query);},error:function(xhr){alert('error');}});
  sendResponse(request.domain + '\'s IP has been acquired.');
});

3.my.js文件

my.js是非常驻进程的文件，只在访问网站的时候才执行。

如果不需要跨域，大多数扩展程序有一个非常驻进程的js文件足够完成全部工作。

chrome.runtime.sendMessage({domain: location.host}, function(response){
	console.log(response);
});

有一点需要注意的是：扩展程序不支持内联的JavaScript，也就是说HTML里面的JS代码不会被执行；建议单独写成一个文件，或者使用事件绑定的方法来解决。

使用方法：打开浏览器的扩展程序，开启开发者模式，点击加载已解压的扩展程序，选择我们开发好的扩展程序文件夹即可。

随便访问一个网站试试：打开网站后，会弹出该网站所对应的ip地址。