如何开发一个chrome扩展

chrome是一个不错的浏览器，web开发者工做中通常都会使用chrome作为默认浏览器，它有不少扩展，给浏览器补充了各类功能，加强了用户体验。chrome扩展具体能干什么？怎么作出来的呢？

chrome扩展是什么？

本质上是HTML+CSS+JavaScript组成的页面，全部文件打包成crx文件，安装到chrome，就可使用

chrome扩展能干什么？

chrome扩展能够操做浏览器的书签、cookie、历史记录、右键菜单、tab选项卡、浏览器窗口，甚至能够读取系统信息包括CPU、内存等，扩展借助这些开放的接口，改善网页的实用性，更多信息请戳这里

怎么作一个扩展出来？

新建项目文件夹，在文件夹下新建配置文件manifest.json

manifest.json配置

{
    // 强制为数字2，http://open.chrome.360.cn/extension_dev/manifest.html#manifest_version
    "manifest_version": 2,
    "name": "扩展名称",
    "description": "扩展描述",
    "version": "版本号",
    "author": "做者",
    "permissions": ["须要的权限"],
    // 各类尺寸的icon
    "icons": {
        "16": "icon路径",
        "48": "icon路径",
        "128": "icon路径"
    },
    "browser_action": {
        "default_popup": "点击扩展icon弹出的那个HTML页面"
    },
    "options_page": "右键扩展icon跳转到扩展的配置HTML页面"
}

permissions就是要申请的权限，好比书签"bookmarks"

以后就能够开始写扩展具体页面和具体功能了，如搜索书签

chrome.bookmarks.search(搜索关键字, (result) => {
    // 操做搜索结果result
})

作的书签复杂的化，可能须要对扩展进行一些个性化配置，好比设置搜索书签的方式是表单值变化当即搜索仍是按搜索按钮再搜索，设置结果利用localStorage存储在本地便可，扩展功能页面利用localStorage.getItem读取

开发过程当中怎么调试？

打开chrome-更多工具-扩展程序

点击“加载已解压的扩展程序”，选择上面新建的项目文件夹，扩展就自动载入到chrome，在地址栏右侧能够看到一个icon，右键它，选择“审查弹出内容”，找到扩展里的js文件夹就能够打断点调试了。

扩展程序开发完了，能够打包成crx文件，点击上图“打包扩展程序”选择项目文件夹肯定，打包完就能够将crx文件直接发送给身边的人安装体验，还能够发布到chrome网上商店，不过要先交5美圆，是的，你提交免费的chrome扩展，还要收你钱，只收一次，不支持微信支付宝。

但愿你们作出好的扩展，参考样例：一个书签搜索扩展，若是本文对你有帮助，能够给个star鼓励一下。

后续补充：作了一个比较实用的扩展auto-clipboard，选中文本自动复制文字到剪切板，而且它突破了百度文库不让复制的限制，前端开发者常常须要在web端复制文本，这个扩展能帮你节省一点时间，我本身已经用了快两年，经得起时间的检验，快star