也可说是突然萌生出来的一个想法: 编写一个Chrome插件。
前段时间发现Chrome浏览器占用的系统内存相当的大。其实也对,随着现代web程序的功能日益强大和丰富,浏览器吃内存是必然的。连office都有在线版的了,对比一下office2016的安装包大小(2.41G),想想当初的windows XP安装包大小也才700M。所以可想而知,在线版的office承载的功能之强大。这么一看,感觉浏览器页越来越像一个操作系统了。这么说下去,那么浏览器里的插件岂不是就相当于我们平时安装的应用软件了。如果写一个插件,是不是就好像写了一个应用软件。哇哦,想想觉得很高大上啊。
其实最终的目的,还是为了解决工作中的一些问题。比如当前开发项目的自动登录功能。
chrome扩展
Chrome扩展可以看做是一个迷你版的站点。它更多的是用来提供功能扩展,而不侧重内容展示。所以,它的实际组成是一组html/CSS/script文件。
认识manifest.json
文件
{
// Required
"manifest_version": 2, // manifest编写规范版本,目前主流2
"name": "Extension Name", // 插件名
"version": "versionString", // 版本号
// Recommended
"default_locale": "en", // 默认编码
"description": "A plain text description", // 插件描述
"icons": { // 插件下载或浏览时显示的图标,可选多种规格,建议128
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_title": "Chrome Test Tool", // 工具栏上的title
"default_icon": "images/logo.png", // 工具栏上展示的logo
"default_popup": "html/index.html" // 展示弹出的页面
}, // 图标显示在浏览器地址栏右边,能在所有页面显示
// Optional
"author": "", // 插件作者
"content_scripts": [{ // 这儿加载的文件,可以操作目标网站页面的元素,不能使用chrome的api
"matches": ["http://www.baidu.com/*"],
"css": ["./css/mystyles.css"],
"js": ["./scripts/myscript.js"]
}]
}
开始实际操作
创建项目的根目录
chrome-plugin
。在chrome-plugin下创建manifest.json文件。内如如上即可:
在chorme-plugin中创建html目录,在这个目录下,创建html文件index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Chrome Tool</title>
<style>
body{
width: 480px;
height: 360px;
}
</style>
</head>
<body>
<p>This is a test page</p>
<script src="../scripts/app.js"></script>
</body>
</html>
- 创建脚本目录scripts,在scripts下创建扩展文件得JavaScript文件
- app.js
- myscript.js
app.js主要是插件内部逻辑,它里面的脚本不可操作目标站点的内容。具体代码如下:
console.log('the app has run ......');
myscript.js是通过 content_scripts字段加载进来的。它里面的脚本可以跟目标站点有交互,但是不能调用目标站点脚本中定义的方法。具体代码如下:
function EnterKeyLogin(){
document.addEventListener('keydown', function(e){
if(e.keyCode === 13){ DoLogin(); }
});
}
function DoLogin(){
//todo do login
};
EnterKeyLogin();
- 添加样式文件,先创建存放样式文件的目录css,然后在该目录下创建样式文件mystyles.css。问价内容如下:
body{
font-size: 1.2em !important;
}
- 创建images目录,用于存放扩展用到的图片。我们这儿主要是是存放了扩展用到的logo。
至此,所有的文件已经编写完成了。剩下的就是如何添加到Chrome中。
在Chrome浏览器右上角位置的三个小圆点下,选择“更多工具” ————> “扩展程序”。打开后,打开右上角的 “开发者模式”。然后选择 “加载已解压的扩展程序”,在弹窗中选择刚刚创建的新项目即可。