折腾一个chrome插件

前言：作为一个开发者，是否有时一个单词不认识或者业务命名而烦恼呢，以至于需要打开浏览器，然后打开google翻译，如此繁琐的打开页面可能一天重复好几遍，而我们开发者对于浏览器标签打开的又多，所以如何简化我们重新打开标签来翻译呢？所以浏览器插件就非常强大了。

chrome浏览器是一个工作、学习和生活的必备工具。除了chrome本身的基本能力（控制台等）外，能大幅提高这个神器的使用体验的是它可扩展能力（插件）以及丰富的插件生态。接下来我们就来折腾一个在线翻译的chrome插件。

online-translate

好了，有了需求我们就得开发了(囧)！

要点：

manifest.json // chrome配置文件
webpack配置(打包，热编译)
jsonp
ajax封装

开发之前了解一下什么是Chrome插件=>

什么是Chrome插件

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。

核心介绍（manifest.json）

这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在需要浏览器打包的根目录。其中，manifest_version、name、version3个是必不可少的，description和icons是推荐的。

栗子(比较全)：

{
  // 清单文件的版本，这个必须写，而且必须是2
  "manifest_version": 2,
  // 插件的名称
  "name": "demo",
  // 插件的版本
  "version": "1.0.0",
  // 插件描述
  "description": "简单的Chrome扩展demo",
  // 图标，一般偷懒全部用一个尺寸的也没问题
  "icons": {
    "16": "img/icon.png",
    "48": "img/icon.png",
    "128": "img/icon.png"
  },
  // 会一直常驻的后台JS或后台页面
  "background": {
    // 2种指定方式，如果指定JS，那么会自动生成一个背景页
    "page": "background.html"
    //"scripts": ["js/background.js"]
  },
  // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
  "browser_action": {
    "default_icon": "img/icon.png",
    // 图标悬停时的标题，可选
    "default_title": "这是一个示例Chrome插件",
    "default_popup": "popup.html"
  },
  // 当某些特定页面打开才显示的图标
  /*"page_action": {
    "default_icon": "img/icon.png",
    "default_title": "我是pageAction",
    "default_popup": "popup.html"
  },*/
  // 需要直接注入页面的JS
  "content_scripts": [{
    //"matches": ["http://*/*", "https://*/*"],
    // "<all_urls>" 表示匹配所有地址
    "matches": ["<all_urls>"],
    // 多个JS按顺序注入
    "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
    // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
    "css": ["css/custom.css"],
    // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
    "run_at": "document_start"
  }, { // 这里仅仅是为了演示content-script可以配置多个规则
    "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
    "js": ["js/show-image-content-size.js"]
  }],
  // 权限申请
  "permissions": [
    "contextMenus", // 右键菜单
    "tabs", // 标签
    "notifications", // 通知
    "webRequest", // web请求
    "webRequestBlocking",
    "storage", // 插件本地存储
    "http://*/*", // 需要请求的地址
    "https://*/*" // 需要请求的地址
  ]
}

介绍完后我们就来开发了(码代码中…)

开发(基于Vue)

初始化项目

mkdir online-translate

cd online-translate

npm init

// 文件层级
├── chrome  // 浏览器打包的文件夹
├── index.html
├── package.json
├── src  // 源码
└── webpack.config.js  // wepack

安装依赖

// 安装项目依赖
npm install vue element-ui --save

// 安装开发依赖
npm install babel-core babel-loader babel-plugin-component babel-preset-env cross-env css-loader file-loader html-webpack-plugin style-loader vue-loader vue-template-compiler webpack webpack-dev-server --save-dev

webpack配置

// webpack.config.js
var path = require('path')
var webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    popup: './src/popup.js',
  },
  output: {
    path: path.resolve(__dirname, './chrome'),
    publicPath: '/',
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    // new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
      inject: true
    })
  ],
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

配置好了，我们就能愉快的开发了

接下来就是 `Vue` 的开发了！

正常的项目开发…

详细源码可以看github

webpack打包

1	npm run build

把代码打包到了chrome文件夹内，然后就可以使用chrome扩展进行打包扩展程序，会生成.crx和.pem文件，然后直接发布或者把.crx文件拖进扩展程序内进行内测。

要点：