使用一个简单的例子来介绍Chrome扩展插件的开发步骤。
Chrome浏览器是目前使用最广的浏览器，它的用户增长速度惊人，在短短几年就超越IE，成为用户最多的浏览器。Chrome浏览器的优势：速度快、稳定，还有强大的插件系统。
本网站访客浏览器统计：
开发者更倾向于使用Chrome浏览器
谷歌的Chrome浏览器最大的魅力就在于可以安装各种扩展插件，让Chrome浏览器自身的功能更加丰富。只要你有HTML、CSS和JavaScript开发经验就可以开发Chrome插件。
开发第一个Google Chrome浏览器插件
Chrome插件开发文档：https://developer.chrome.com/extensions
我要制作一个简单的图片替换插件－把网页中的所有图片替换为预定义的图片。
首先创建manifest.json文件
这个文件是插件的描述信息，必不可少：
{
"manifest_version": 2,
"name": "替换图像",
"description": "替换网页中的所有图片",
"version": "3.14158",
"icons": {
"48": "icon.png"
},
"permissions": ["tabs", "<all_urls>"],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
解释：
manifest_version：manifest版本，指定如何执行代码，目前版本为2
name：插件名称
description：插件描述
version：插件版本
icon：显示在菜单栏的指示图标，大小范围16-128像素
permissions：插件要使用的chrome API，我们这里需要tabs来操作DOM。完整的权限看这里
browser_action：点击图标，调用popup
我使用icon.png：
创建popup.html文件
使用HTML、CSS创建popup窗口：
<html>
<head>
<style>
body {
height: 30px;
width: 220px;
}
.wrapper {
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<button id="clickme">Click</button>
</div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
JavaScript文件
点击Click执行的js脚本，图片替换功能实现的代码：
popup.js：
function runSwitchjs() {
chrome.tabs.executeScript({
file: 'switch.js'
});
}
document.getElementById('clickme').addEventListener('click', runSwitchjs)
switch.js：
for (var i = 0; document.images.length; i++) {
// 要替换图片的url
document.images[i].src = "http://blog.topspeedsnail.com/wp-content/uploads/2016/07/pic.png"
};
需要注意的是，popup.js并不能直接调用switch.js，需要间接调用一下。
到此，一个简单的插件就完成了。
加载测试插件
把上面创建的所有文件放到某个目录下：
打开浏览器访问 chrome://extensions/ 或 去设置->插件，进入到插件管理器。
打开开发者模式，然后加载插件：
打开任意带图片的网站，点击插件的Click按钮：
Chrome插件开发文档：https://developer.chrome.com/extensions