【Chrome 扩展开发】 - 01. 使用模板构建项目基础

前文说了因为业务数据的需要，我在尝试使用 Chrome 扩展的方式来抓取网站数据，因此用两天时间找了一些教程和电子书快速过了一下 Chrome 扩展开发的方法，总结如下：

Chrome 扩展开发基本上等同于 Web 前端开发，除了调用 Chrome 本身自己的一些 API 外，并没有什么特别的。

好，基于以上理论，我们就可以抛弃直接刀耕火种的方式，使用现代化工具专注于业务逻辑的开发。

1. 站在巨人的肩膀上，使用 Vue 框架

Vue 就不多介绍了，可以让大家用更熟悉和快捷的方式来进行业务开发。当然，熟悉 Vue 的使用方式后，直接可以使用 Vue CLI 进行创建项目，不过 Chrome 的扩展稍微还是和常规的 Web 项目有点不一样。

Chrome 扩展显示页面的地方主要有这么几个：

• 浏览器右上角图标点击后出现的 popup；
• 扩展的选项（option）配置页面；
• 覆盖普通 Tab 的页面。

因此项目结构也会稍稍与普通 Web 页面不一样，难道要自己配置吗？其实不需要，直接跟着我敲以下代码即可：
首先我默认你已经装好了 Node 和 NPM，然后安装下 Vue 的命令行工具。

npm install -g @vue/cli
npm install -g @vue/cli-init

第一步：克隆模板初始化项目

vue init kocal/vue-web-extension your-chrome-ext-project-name

第二步：根据提示配置项目信息和需要安装的依赖、插件

? Project name new-tab-page
? Project description A Vue.js web extension
? Author James Hibbard <chrome@ext.com>
? License MIT
? Use Mozilla's web-extension polyfill? No
? Provide an options page? No
? Install vue-router? No
? Install vuex? No
? Install axios? Yes
? Install ESLint? No
? Install Prettier? No
? Automatically install dependencies? npm

第三步：安装依赖项

cd your-chrome-ext-project-name
npm install

第四步：构建扩展应用

npm run watch:dev

正常执行以上步骤后，会在 dist 文件夹中生成构建后的文件，直接在 Chrome 浏览器扩展管理页面下，启用开发者模式，加载已解压的扩展程序，选中 dist 文件夹，不出意外，会弹出 Hello World！。

点击浏览器右上角的扩展图标，也会出现 popup 窗口。

2. 有了身材还要颜值，引入 BootstrapVue 框架

现在做 Web 开发，其实还是幸福多了，如果更多的是做一些管理应用，那么直接用现成的 UI 框架，展现也是很有现代化水平的，这里我们会引入 BootstrapVue 框架，作为颜值担当。

话不多说，直接搞起。

第一步：安装插件

npm install bootstrap-vue bootstrap

第二步：在应用入口注册 BootstrapVue

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

第三步：引入 Bootstrap 和 BootstrapVue 的 CSS 文件

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

我们拿 popup 作为应用的入口点，那么 popup.js 的样子总体看应该长这么一个样子：

import Vue from 'vue'
import App from './App'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

/* eslint-disable no-new */
new Vue({
   render: h => h(App)
}).$mount('#app')

第四步：看看效果，我们放一个 Table 进去

<template>
  <div id="popup">
    <b-container fluid="sm">
      <b-table striped hover :items="items"></b-table>
    </b-container>
  </div>
</template>

数据部分：

<script>
export default {
  data() {
    return {
      items: [
        { age: 40, first_name: "Dickerson", last_name: "Macdonald" },
        { age: 21, first_name: "Larsen", last_name: "Shaw" },
        { age: 89, first_name: "Geneva", last_name: "Wilson" },        
        { age: 38, first_name: "Jami", last_name: "Carney" }
      ]
    };
  }
};
</script>

差不多有个样子了，不过看着有点窄。

你猜对了，这个页面有限制，最大是 800px × 600px，而且无视 BootstrapVue 的样式大小。

咋办呢，好办！简单粗暴！

<style lang="scss" scoped>
#popup{
  width: 780px;
  height: 550px;
}
</style>

给父元素加个 id，手动大小。哈哈，好了，不要太纠结，我们还是应该把关注点放在业务功能的实现上。

总的来说，直接参照以上两部分，你可以把 Chrome 扩展的开发项目基本样子搭起来了，而且是用 Vue 和 BootstrapVue 的，不过这后面还是有很多核心的知识点刻意没讲，为的是让读者能快速跟着看到有个真正能跑起来的 Chrome 应用，不至于一下子就懵了。后面该关注一些跟业务相关的技术点了，敬请期待。

3. 附录：运行开发命令

npm run build

Build the extension into dist folder for production.

npm run build:dev

Build the extension into dist folder for development.

npm run watch

Watch for modifications then run npm run build.

npm run watch:dev

Watch for modifications then run npm run build:dev.
It also enable Hot Module Reloading, thanks to webpack-extension-reloader plugin.
:warning: Keep in mind that HMR only works for your background entry.

npm run build-zip

Build a zip file following this format <name>-v<version>.zip, by reading name and version from manifest.json file.
Zip file is located in dist-zip folder.

参考文献

• vue-web-extension
• 用 Vue 开发自己的 Chrome 扩展程序
• 【干货】Chrome插件(扩展)开发全攻略
• 快速上手BootstrapVue
• BootstrapVue 官方网站