谷歌浏览器扩展程序模板脚手架开发crx-template-cli

446 阅读2分钟

前言

在之前介绍了谷歌浏览器扩展程序的简易结构和通信机制之后,发现如果我想要自己来实现一个扩展程序的基本结构需要去对应的代码仓中来复制一份模板,这样就让我产生了想法制作一个脚手架来生成一个对应的模板,有了该模板之后我添加至浏览器中就可以方便进行我的扩展程序的开发了,good idea!

开发脚手架基础知识

  1. package.json 文件中的 bin 可以在终端中执行对应的命令。
  2. commander 库,完整的 node.js 命令行解决方案的库,cool~

项目开发

npm init -y初始化工程后,在 package.json 文件中的 bin 可以执行对应的 crx 命令。目标是执行 crx create my-project 时复制文件夹 lib 到文件夹 my-project 中。

 "bin": {
    "crx": "./bin/index.js"
  }

./bin/index.js 文件中使用 commander 库。

#!/usr/bin/env node
const program = require('commander')
const { create } = require('../src/create')

program
.version('1.0.0')
.command('create <name>')
.description('create a new crx extension template project')
.action(name => { 
    create(name)
})

program.parse()

安装到包之后,在终端中执行对应的 crx 命令时会有以下的提示。

Usage: index [options] [command]

Options: -V, --version output the version number -h, --help display help for command

Commands: create create a new crx extension template project help [command] display help for command

../src/create.js 文件中使用 fs-extra 库来复制文件夹 lib(即扩展程序模板)。

const path = require('path')
const fse = require('fs-extra')

exports.create = name => {
    fse.copy(path.resolve(__dirname, './lib'), path.resolve(process.cwd(), name))
        .then(() => console.log('success!'))
        .catch(err => console.error(err))
}

项目调试

众所周知,在包未发布之前是没有办法进行安装的,并且在开发阶段的包也不可能未开发完成就直接进行发布的,所以本地开发阶段可以使用 npm link 命令进行本地调试。

世界上很多事情看上去很难,去尝试做了之后再回过头来看,会觉着简单的说,have fun ~