编写Chrome扩展程序

Chrome的扩展程序不少，也很容易入门，能够来简单实现一下

看看 官方文档 或者翻译的文档：百度、360，慢慢就能实现出一个扩展程序来

 

每一个扩展程序应用通常会包含：

• 一个manifest清单文件
• html文件
• js文件
• 其余文件等

 

能够看到，其实结构如同通常的页面，有共通之处。

 

1、了解Chrome扩展程序

Chrome扩展程序商店地址为：https://chrome.google.com/webstore/category/extensions?hl=zh-CN

访问Chrome浏览器中已安装的扩展：chrome://extensions/

 

能够看到一些拓展程序的基本信息

通常来讲，安装扩展程序能够进行在线安装的方式，但在离线环境或内网机环境下，须要安装扩展程序，要怎么办呢

crx文件

crx文件其实就是扩展程序包，可直接将其拖动到上述扩展程序列表页面，便可安装

在windows系统下，能够在如下文件路径访问相应的扩展程序

最后这个图中的文件，其实就是扩展程序的源码了

在扩展程序列表页中点击打包扩展程序，选择相应的程序目录，就能够打包出一个程序包

 

.crx文件就是咱们要的扩展程序包了，将其拖动到页面，便可安装。 .pem是密钥文件

 

 

2、建立Chrome扩展程序

由上述知晓了扩展程序的大体信息，要建立一个扩展程序，也不外乎是建立一个项目，依据必定的规则编写逻辑后再打包安装

 

接下来就把以前写的简易计算器弄成一个扩展程序

看看博客园下方有几个广告，索性顺便用扩展程序移除页面上的广告吧

 

 

扩展程序须要一个manifest清单文件，提供有关应用的各类信息

{
    "manifest_version": 2,
    "name": "my-calculator",
    "description": "A simple calculator",
    "version": "0.0.1",

    "permissions": [
        "tabs",
        "http://www.cnblogs.com/"
    ],

    "browser_action": {
        "default_icon": "icons/icon_active.png",
        "default_title": "Calculate it",
        "default_popup": "calculator.html"
    },

    "content_scripts": [{
        "matches": ["*://www.cnblogs.com/*"],
        "js": ["js/jquery.js", "js/content.js"]
    }]
}

这就是须要的清单文件了，定义了程序的基本信息，这些字段的做用就自行去 文档 查看吧

文件目录结构为：

计算器的代码，以前那篇文章有了，这里就不贴了

要移除博客文章下的广告，是操做页面，因此应该在content_scripts文件里操做，即这里的content.js

$('div[id^="ad_"]').each(function() {
    var $this = $(this);
    console.log('remove', $this.attr('id'));
    $this.remove();
});

记得先在manifest中配置好permissions的页面访问权限

 

文件已经准备完毕，如今进行程序的打包

打包方式相似上述的方法，打包成功后拖进来安装就好了

能够看到计算器已经在扩展程序之中

再看看博客文章下的广告，已经被清除了

 

3、发布Chrome扩展程序

本身的Chrome扩展程序写好以后，能够发布到商城之中

这篇文章 讲得挺好，就很少说了