效果图
简介
Chrome扩展程序平时很常用，比如笔者正在使用的扩展程序有：Google翻译、AdBlocks广告屏蔽、Octotree查看github文件树、SimilarWeb查找相似网站等等。这些扩展程序其实是用Web程序写出来的，使用到的技术有JavaScript、Html、CSS、JSON。
由于JavaScript是一种解释型语言，所以无需安装编译环境，任意一个编辑器都可以开发。笔者使用的VS Code开发，最后的程序结构如下：
1.新建manifest.json
新建一个文件夹，命名为HelloWorld。在文件夹中新建images文件夹，放入一张拓展程序的图标，命名为icon.png，本例中笔者使用的图标是这个：
在HelloWorld文件夹中新建manifest.json文件，和AndroidManifest类似，这是一个清单文件，使用的JSON格式，编辑如下：
{
"manifest_version": 2,
"name": "Hello world",
"version": "1.0",
"description": "我的第一个Chrome扩展",
"icons": {
"48": "images/icon.png"
},
"browser_action": {
"default_icon": "images/icon.png",
"default_title": "Hello world",
"default_popup": "popup.html"
}
}
这里用到的属性的含义如下：
- manifest_version：固定为2。可以理解为表示第二代扩展程序。（在Chrome 18以下此值为1，Chrome 18此值为2。）
- name：扩展程序商店展示的程序名字
- version：程序的版本，商店中也会展示
- description：商店展示的程序描述
- icons：商店展示的图标，可以有多个分辨率
- browser_action：浏览器中点击程序图标时触发的动作
- default_icon：浏览器中展示的程序图标
- default_title：浏览器中在拓展程序上悬停时显示的程序名字
- default_popup：点击时弹出的窗口
本例中最后生成的扩展程序在应用商店中展示效果如下：
PS：manifest的所有属性可以在Google官网中查到：https://developer.chrome.com/apps/manifest
2.新建popup.html
在manifest中可以看到，default_popup属性值指向一个popup.html文件，那么我们就在HelloWorld文件夹下新建popup.html，编辑如下：
<html>
<head>
<style>
body {
width: 200px;
height: 100px;
}
div {
line-height: 100px;
font-size: 22px;
text-align: center;
}
</style>
</head>
<body>
<div id="popupWindow"></div>
<script src="js/helloworld.js"></script>
</body>
</html>
这里用到的就是HTML和CSS的基本知识，可以看到我们在style中给body的宽高定义为：200px*100px；div块的样式为：行高100px，字体大小22px，文字居中。
在body中给div块添加了id为popupWindow，并且加载了一个JavaScript脚本。
3.新建helloworld.js
在HelloWorld文件夹中新建js文件夹，在js文件夹中新建helloworld.js文件，编辑如下：
var popupWindow = document.getElementById('popupWindow');
displayMessage(popupWindow);
function displayMessage(popupWindow) {
popupWindow.innerHTML = "Hello world!";
}
代码很简单，先通过id找到popupWindow元素，然后在窗口中设置显示文字为Hello world!，编辑完成后保存文件。
4.加载拓展程序
在Chrome浏览器中输入chrome://extensions/,然后打开页面右上角的开发者模式，再点击加载已解压的拓展程序，选择HelloWorld文件夹，然后扩展程序列表中就会出现我们自己的扩展程序了，并且浏览器右上角也会出现我们自己的拓展程序图标。
点击浏览器右上角我们自己的扩展程序图标就能弹出Hello world弹窗，这样就完成了开始时的效果图。
