编写及打包一个chrome插件

由于最近新浪微博改版了，头像都成圆形的了。看的很不习惯，于是产生写了一个浏览器插件让它变成方形的想法。经过网上的大量学习，用自己博客实验，终于写成功了一个插件，下面给出这个例子。

首先，建一个wenote文件夹，再建一个scripts子文件夹。

一、在scripts子文件夹下，写一个wenotebook.js，内容如下：

(function(){
    var style = document.createElement("style");
    style.type = "text/css";
    style.textContent = ".tilexsm-image {height: 36px;width: 36px;font-size: 24px;background-color: #f0ad4e;text-align: center;color: #fff;float: left;margin-right:10px;margin-left: 10px;border-radius:50%;}";
    document.head.appendChild(style);
})();

二、在wenote文件下，写一个manifest.json，内容如下：

{
    "manifest_version": 2,
    "name": "测试插件",
    "version": "0.0.1",
    "description": "方形头像变成圆形头像",
    "content_scripts": [
    {
        "all_frames" : true,
        "matches": ["*://www.wenotebook.com/*"],
        "js": [
            "scripts/wenotebook.js" //引用js文件
        ]
    }
    ]
}

其中，name是插件的名称，version是版本号，description是插件描述。matches是用来匹配url的，js是用来引用刚刚写的js。

三、打包

1、在地址栏输入：chrome://extensions/

2、在扩展页面点击右上角：开发人员模式(Developer mode)

3、点击打包扩展（Pack extension...），在弹出来的框中点击扩展程序根目录右边的“浏览”，选择刚刚新建wenote文件夹。

4、点击“打包扩展程序（Pack extension）”，弹出如下说明，打包成功，.crx文件便可以在Google Chrome浏览器上安装。

四、说明

    1、pem文件为生成的密钥文件，没有实质用途，可直接删除，只保留crx即可。

    2、点击Load unpacked extension...选择解压后的插件文件夹（wenote）也可以直接安装插件。

原文地址：http://www.wenotebook.com/Article/Index?articleID=2014114235346