编写一个Chrome插件

也可说是突然萌生出来的一个想法： 编写一个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浏览器右上角位置的三个小圆点下，选择“更多工具” ————> “扩展程序”。打开后，打开右上角的 “开发者模式”。然后选择 “加载已解压的扩展程序”，在弹窗中选择刚刚创建的新项目即可。