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

Rabbitzzc
2,101 阅读3分钟

前言

😋😋😋嘿，各位好~~

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

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

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

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

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

manifest.json

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

创建manifest.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"
        }
    }
}

安装

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

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

恭喜！您现在可以通过单击自定义插件图标或者通过快捷键来弹出插件页面。

当我们改变插件内部的代码，只需要点击插件重新刷新按钮即可， Chrome会重新加载插件。

晚安~

avatar
文章
阅读
粉丝