可視化爬蟲配置chrome插件開發之搭建vue開發環境

使用vue開發chrome插件的好處

本次開發的插件是抓取配置插件，有很多的form表單以及彈出層，如果純使用js的話會有很多動態創建dom的操作。使用vue和ES6的import語法以及webpack的html加載器相配合，可以減少大量動態創建dom的代碼。

vue環境搭建

工作準備

• 請安裝node.js（新版自帶npm包管理工具）
• 建議安裝cnpm淘寶鏡像，安裝依賴的時候會更快一些

# -g 安裝在全局 registry指定國內下載地址
$ npm install cnpm -g --registry=https://registry.npm.taobao.org

npm 與 cnpm 基本等價，但是很少情況下cnpm也許有些bug，所以請斟酌使用

安裝vue-cli 這是vue的腳手架，可以很方便的爲我們搭建一個vue項目

$ npm install vue-cli -g

其他更詳細的vue使用方法這裏不細講，參見vue官方文檔

腳手架創建

打開命令行，進入到你的工作空間,我們使用vue腳手架來搭建項目

# 創建一個基於 `webpack` 模板的新項目
$ vue init webpack chromespidercfg
# 創建過程會要求你的項目起名(**注意現在項目名不支持駝峯式命名**)之類,由於是簡單的頁面，所以vue-router之類的就不裝了，後面有我的運行截圖
$ cd chromespidercfg
$ cnpm install
$ npm run dev

訪問頁面 localhost:8080 出來頁面了就算成功了，Ctrl + C y確認退出
下面是我創建項目的截圖：

配置

如果你想要使用vue開發單頁面程序，那麼這個頁面已經搭建好了,但是我們要做的是chrome插件開發，所以還需要做一些配置

chrome插件必要文件

chrome開發需要一些必要的文件，比如manifest.json，我們要創建一下

在目錄下創建chrome文件夾，名字隨便起，我在這裏起名叫chrome是因爲我的vue編譯配置中用的是這個名字，現在的目錄結構如下：

現在進入剛剛創建的chrome目錄，創建一個manifest.json文件和runbackground.min.js文件，以及一個icons文件夾，這個icons文件夾是放圖標的，chrome文件夾結構如下：

manifest.json文件就是插件的主要配置了，具體的配置可以查看我的另一篇文章爬蟲可視化點選配置工具之chrome插件簡介，如下：

{
    "background": {
        "scripts": ["runbackground.min.js"]
    },
    "browser_action": {
        "default_icon": "./icons/icon.png",
        "default_title": "簡單爬，簡簡單單採集你的數據"
    },
    "content_scripts": [{
        "js": ["js/connector.js"],
        "matches": ["http://*/*", "https://*/*"]
    }],
    "externally_connectable": {
        "accepts_tls_channel_id": false,
        "ids": ["*"]
    },
    "icons": {
        "128": "./icons/128.png",
        "16": "./icons/16.png",
        "48": "./icons/48.png"
    },
    "description": "爬蟲可視化點選配置工具，簡簡單單採集你的數據",
    "manifest_version": 2,
    "name": "爬蟲可視化點選配置工具",
    "permissions": ["cookies", "tabs", "notifications", "background", "contextMenus", "*://*/*"],
    "version": "1.0.0",
    "web_accessible_resources": ["*", "*/*"]
}

runbackground.min.js這個裏面寫了一些啓動插件的邏輯，很簡單，如下：

chrome.runtime.getPackageDirectoryEntry(function(info) {
    extensionId = info.filesystem.name.split('_')[1];
});

/*
    插件啓動，創建爬蟲任務
*/
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.sendMessage(tab.id, JSON.stringify({
        command: 'beginUI'
    }), function(msg) {
        chrome.tabs.executeScript(tab.id, {
            file: 'js/paApa.js',
            allFrames: false
        })
    });
});

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    var msg = JSON.parse(message);
    console.log(msg);
});

修改webpack配置

寫到這裏，大家一定很奇怪manifest.json文件裏的js/connector.js是哪裏來的，明明沒有js目錄啊，這就是webpack編譯出來

修改build目錄下的webpack.base.conf.js文件，去掉所有limit字段
將entry字段修改成以下內容，這就是編譯之後的文件

entry: {
    paApa: './src/main.js',
    connector: './src/js/connector.js'
}

在module的rules添加以下內容，一個是加載css的，一個是加載html的：

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
},
{
    test: /\.html$/,
    use: [{
        loader: 'html-loader'
    }],
}

將webpack.prod.conf.js文件修改成以下內容，爲什麼要這麼改請自行查看webpack的資料吧：

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
    devtool: config.build.productionSourceMap ? config.build.devtool : false,
    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].js'),
        chunkFilename: utils.assetsPath('js/[id].js')
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        // http://vuejs.github.io/vue-loader/en/workflow/production.html
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: {
                    warnings: false
                }
            },
            sourceMap: config.build.productionSourceMap,
            parallel: true
        }),
        // keep module.id stable when vendor modules does not change
        new webpack.HashedModuleIdsPlugin(),
        // enable scope hoisting
        new webpack.optimize.ModuleConcatenationPlugin(),
        // copy custom static assets
        new CopyWebpackPlugin([{
            from: path.resolve(__dirname, '../chrome'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
        }])
    ]
})

if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')

    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
                '\\.(' +
                config.build.productionGzipExtensions.join('|') +
                ')$'
            ),
            threshold: 10240,
            minRatio: 0.8
        })
    )
}

if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

修改config\index.js文件，刪除build字段下的index字段，將assetsSubDirectory字段值修改爲chrome，這就會將上面創建的chrome拷貝到編譯後的目錄中

修改完配置，還要安裝幾個插件，分別是html和css加載器，以及jquery：

npm install html-loader style-loader jquery -D

到此爲止，環境基本上搭建完成了，下面就是寫代碼了

編寫基本的代碼框架

由於插件中主要用到了彈出層，我這裏用的是layer.js，當然是修改過的，支持ES6的導入和導出，layer.css，layer.js，當然也可以自己寫一個或者使用其他的彈出層組件
進入src目錄，修改main.js爲以下內容，作用就是打開一個彈出層

import Vue from 'vue';
import $ from "jquery";
import './layer/layer.css';
import layer from './layer/layer';

Vue.config.productionTip = false;

let _confirmLayer = 0;
let windowHeight = $(window).height();
if (windowHeight > window.screen.height) {
    windowHeight = document.body.clientHeight;
}

let defOption = {
    type: 1,
    shade: false,
    maxmin: true,
    closeBtn: 1,
    zIndex: 2147483599,
    title: "爬蟲可視化點選配置工具",
    offset: ["30px", "30px"],
    content: '<div id="__paApa_container"></div>',
    area: ["450px", windowHeight * 0.8 + "px"],
    cancel: function(index) {
        event.stopPropagation();
        if (_confirmLayer > 0) {
            layer.close(_confirmLayer);
        }
        _confirmLayer = layer.confirm(
            "關閉爬蟲可視化點選配置工具？", {
                icon: 0,
                title: "信息",
                zIndex: 2147483615
            },
            function(_index) {
                event.stopPropagation();
                layer.closeAll();
                _confirmLayer = -1;
                layer.msg("再見!", {
                    zIndex: 2147483620,
                    time: 3000,
                    icon: 1
                });
            },
            function(_index) {
                event.stopPropagation();
                layer.close(_index);
                _confirmLayer = -1;
            }
        );
        return false;
    }
};

let layerId = layer.open(defOption);

$("#layuiex-layer" + layerId + " .layuiex-layer-max").bind("click", function() {
    $(this).hide();
}).hide();

$("#layuiex-layer" + layerId + " .layuiex-layer-min").bind("click",
    function() {
        $(this).next().show();
    }
);

new Vue({
    el: "#__paApa_container",
    components: {},
    data() {
        return {};
    },
    mounted() {},
    methods: {}
});

上面還提到了connector.js這個文件，這個文件的作用其實就是作爲通信用的，現在可以在js目錄下創建一個connector.js文件，然後隨便輸出個內容就可以了

安裝測試

完成以上步驟就可以測試一下了

在根目錄執行以下命令：

npm run build

出現下圖就證明已經執行成功了

此時跟目錄中會多一個dist目錄，這就是執行的結果，然後打開chrome瀏覽器安裝插件就可以了，打開插件管理頁面，具體操作請查看爬蟲可視化點選配置工具之chrome插件簡介，然後打開開發者模式，再點擊加載已解壓的擴展程序，如下圖：

之後再選擇dist目錄中的chrome文件夾即可，如下圖：

安裝成功的話會在插件列表看到下圖：

chrome工具欄也會有對應的插件圖標：

此時打開一個其他頁面點擊這個圖標就會彈出我們要的框了，如下圖：

現在基本的框架已經搭建好了，之後要做的就是在這個彈出框裏繪製輸入框等元素了，這個步驟下回再分解了

以上源碼放在碼雲，請自行查看吧