效果图
简介
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
弹窗,这样就完成了开始时的效果图。