入门系列1 - 如何开发一个chrome插件

时间 2019-11-07

原文原文链接

前言

😋😋😋嘿，各位好~~html

在公司一直作B端开发，或多或少有时候会感受多无趣。当大部分同窗在研究研究组件和UI的时候，我想我也得找点兴趣点，做为2019年最后三个月持续投入的重点。node

初期，为了训练训练编程能力和积累测试用例的编写，在codewar网站上作了一些题目，无奈写者我太笨了，英文也很差，致使不少题目须要看社区人给的答案。忽然，没错就是忽然，忽然发现不少答案真是太简洁了，几行代码搞定一个复杂题目。仔细一看，原来是正则做祟。也正是这时候，将正则做为学习的目标，同时市面上或多或少用了一些正则的客户端，发现也不是很好用，所以Electron也是学习目标之一，打算利用Electron和正则表达式写一个正则软件，后续期待吧~web

至于开发chrome插件的灵感是来自于小程序，当小程序带给商业很大的价值，而平时使用chrome 插件也带来了在使用浏览器的过程当中的极致体验。想经过chrome插件，为开源作点有趣的事情，也但愿2019年最后三个月能作点更有趣的事。keep going~正则表达式

快速开发Hello Extension 实例，迈出开发插件第一步

找一个合适的文件夹，建立hello-extension，cd hello-*chrome

manifest.json

当咱们去下载任何一个chrome插件的时候，其实就是下载一个web程序，而manifest.json就是该程序的介绍，它是必须的，由于manifest.json会告诉Chrome有关该插件的重要信息，相似于node项目的package.json文件。编程

建立manifest.json文件，添加以下代码:json

{
    "manifest_version": 2,  // 写死，不容许修改
    "name": "Hello Extensions", // 名称
    "version": "1.0", // 版本
    "description": "走向插件第一步, hello" // 描述
}
复制代码

每一个插件都须要一个manifest.json文件，尽管manifest中存在不少配置，可是大多数配置咱们并用不上。小程序

popup.html

继续吧。咱们在manifest.json添加broswer_action字段浏览器

{
    "manifest_version": 2,  // 写死，不容许修改
    "name": "Hello Extensions", // 名称
    "version": "1.0", // 版本
    "description": "走向插件第一步, hello", // 描述
     "browser_action": { // 标识浏览器右上角的插件
        "default_icon": "./icon/16.png",  // 右上角插件的图标
        "default_popup": "./popup.html" // 点击插件，弹出的页面(popup->弹出)
    }
}
复制代码

在hello-*下建立popup.html页面，添加以下内容学习

<html>

<body>
    <h1> Hello Extensions </h1>
    <p> 迈出插件开发的第一步~ </p>
</body>

</html>
复制代码

icon目录的建立和图标引入，写者就不描述了，各位爷能够本身加上喜好的图标。

至上，咱们已经开发出了一个hello extensions插件了，不过等等，咱们还能够作得更完善，好比试试快捷键？？试试就试试。。。

在manifest.json文件下增长commands字段:

{
    "manifest_version": 2,  // 写死，不容许修改
    "name": "Hello Extensions", // 名称
    "version": "1.0", // 版本
    "description": "走向插件第一步, hello", // 描述
     "browser_action": { // 标识浏览器右上角的插件
        "default_icon": "./icon/16.png",  // 右上角插件的图标
        "default_popup": "./popup.html" // 点击插件，弹出的页面(popup->弹出)
    },
    "commands": {
        "_execute_browser_action": {
            "suggested_key": {
                "default": "Ctrl+Shift+F",
                "mac": "MacCtrl+Shift+F"
            },
            "description": "Opens hello.html"
        }
    }
}
复制代码

安装

插件代码准备就绪，下一步就得赶忙安装插件试试代码有没有问题啦。

浏览器导航到chrome:extensions页面，或者单击浏览器选择扩展程序也能够打开扩展页面。
选中右上角开发者模式。
单击加载已解压的扩展程序，而后上传上面程序存放的文件夹。

恭喜！您如今能够经过单击自定义插件图标或者经过快捷键来弹出插件页面。

当咱们改变插件内部的代码，只须要点击插件从新刷新按钮便可， Chrome会从新加载插件。

晚安~