可視化爬蟲配置chrome插件開(kāi)發(fā)之搭建vue開(kāi)發(fā)環(huán)境

impig33 發(fā)布于2019-08-16 13:25 / 2948人閱讀

摘要：使用開(kāi)發(fā)插件的好處本次開(kāi)發(fā)的插件是抓取配置插件，有很多的表單以及彈出層，如果純使用的話會(huì)有很多動(dòng)態(tài)創(chuàng)建的操作。使用和的語(yǔ)法以及的加載器相配合，可以減少大量動(dòng)態(tài)創(chuàng)建的代碼。

使用vue開(kāi)發(fā)chrome插件的好處

本次開(kāi)發(fā)的插件是抓取配置插件，有很多的form表單以及彈出層，如果純使用js的話會(huì)有很多動(dòng)態(tài)創(chuàng)建dom的操作。使用vue和ES6的import語(yǔ)法以及webpack的html加載器相配合，可以減少大量動(dòng)態(tài)創(chuàng)建dom的代碼。

vue環(huán)境搭建 工作準(zhǔn)備

請(qǐng)安裝node.js（新版自帶npm包管理工具）

建議安裝cnpm淘寶鏡像，安裝依賴的時(shí)候會(huì)更快一些

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

npm 與 cnpm 基本等價(jià)，但是很少情況下cnpm也許有些bug，所以請(qǐng)斟酌使用

安裝vue-cli 這是vue的腳手架，可以很方便的為我們搭建一個(gè)vue項(xiàng)目

$ npm install vue-cli -g

其他更詳細(xì)的vue使用方法這里不細(xì)講，參見(jiàn)vue官方文檔

腳手架創(chuàng)建

打開(kāi)命令行，進(jìn)入到你的工作空間,我們使用vue腳手架來(lái)搭建項(xiàng)目

# 創(chuàng)建一個(gè)基于 `webpack` 模板的新項(xiàng)目
$ vue init webpack chromespidercfg
# 創(chuàng)建過(guò)程會(huì)要求你的項(xiàng)目起名(**注意現(xiàn)在項(xiàng)目名不支持駝峰式命名**)之類,由于是簡(jiǎn)單的頁(yè)面，所以vue-router之類的就不裝了，后面有我的運(yùn)行截圖
$ cd chromespidercfg
$ cnpm install
$ npm run dev

訪問(wèn)頁(yè)面 localhost:8080 出來(lái)頁(yè)面了就算成功了，Ctrl + C y確認(rèn)退出
下面是我創(chuàng)建項(xiàng)目的截圖：

配置

如果你想要使用vue開(kāi)發(fā)單頁(yè)面程序，那么這個(gè)頁(yè)面已經(jīng)搭建好了,但是我們要做的是chrome插件開(kāi)發(fā)，所以還需要做一些配置

chrome插件必要文件

chrome開(kāi)發(fā)需要一些必要的文件，比如manifest.json，我們要?jiǎng)?chuàng)建一下

在目錄下創(chuàng)建chrome文件夾，名字隨便起，我在這里起名叫chrome是因?yàn)槲业?b>vue編譯配置中用的是這個(gè)名字，現(xiàn)在的目錄結(jié)構(gòu)如下：

現(xiàn)在進(jìn)入剛剛創(chuàng)建的chrome目錄，創(chuàng)建一個(gè)manifest.json文件和runbackground.min.js文件，以及一個(gè)icons文件夾，這個(gè)icons文件夾是放圖標(biāo)的，chrome文件夾結(jié)構(gòu)如下：

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

{
    "background": {
        "scripts": ["runbackground.min.js"]
    },
    "browser_action": {
        "default_icon": "./icons/icon.png",
        "default_title": "簡(jiǎn)單爬，簡(jiǎn)簡(jiǎn)單單采集你的數(shù)據(jù)"
    },
    "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": "爬蟲可視化點(diǎn)選配置工具，簡(jiǎn)簡(jiǎn)單單采集你的數(shù)據(jù)",
    "manifest_version": 2,
    "name": "爬蟲可視化點(diǎn)選配置工具",
    "permissions": ["cookies", "tabs", "notifications", "background", "contextMenus", "*://*/*"],
    "version": "1.0.0",
    "web_accessible_resources": ["*", "*/*"]
}

runbackground.min.js這個(gè)里面寫了一些啟動(dòng)插件的邏輯，很簡(jiǎn)單，如下：

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

/*
    插件啟動(dòng)，創(chuàng)建爬蟲任務(wù)
*/
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是哪里來(lái)的，明明沒(méi)有js目錄啊，這就是webpack編譯出來(lái)

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

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

在module的rules添加以下內(nèi)容，一個(gè)是加載css的，一個(gè)是加載html的：

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

將webpack.prod.conf.js文件修改成以下內(nèi)容，為什么要這么改請(qǐng)自行查看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

修改configindex.js文件，刪除build字段下的index字段，將assetsSubDirectory字段值修改為chrome，這就會(huì)將上面創(chuàng)建的chrome拷貝到編譯后的目錄中

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

npm install html-loader style-loader jquery -D

到此為止，環(huán)境基本上搭建完成了，下面就是寫代碼了

編寫基本的代碼框架

由于插件中主要用到了彈出層，我這里用的是layer.js，當(dāng)然是修改過(guò)的，支持ES6的導(dǎo)入和導(dǎo)出，layer.css，layer.js，當(dāng)然也可以自己寫一個(gè)或者使用其他的彈出層組件
進(jìn)入src目錄，修改main.js為以下內(nèi)容，作用就是打開(kāi)一個(gè)彈出層

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: "爬蟲可視化點(diǎn)選配置工具",
    offset: ["30px", "30px"],
    content: "",
    area: ["450px", windowHeight * 0.8 + "px"],
    cancel: function(index) {
        event.stopPropagation();
        if (_confirmLayer > 0) {
            layer.close(_confirmLayer);
        }
        _confirmLayer = layer.confirm(
            "關(guān)閉爬蟲可視化點(diǎn)選配置工具？", {
                icon: 0,
                title: "信息",
                zIndex: 2147483615
            },
            function(_index) {
                event.stopPropagation();
                layer.closeAll();
                _confirmLayer = -1;
                layer.msg("再見(jiàn)!", {
                    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這個(gè)文件，這個(gè)文件的作用其實(shí)就是作為通信用的，現(xiàn)在可以在js目錄下創(chuàng)建一個(gè)connector.js文件，然后隨便輸出個(gè)內(nèi)容就可以了

安裝測(cè)試

完成以上步驟就可以測(cè)試一下了

在根目錄執(zhí)行以下命令：

npm run build

出現(xiàn)下圖就證明已經(jīng)執(zhí)行成功了

此時(shí)跟目錄中會(huì)多一個(gè)dist目錄，這就是執(zhí)行的結(jié)果，然后打開(kāi)chrome瀏覽器安裝插件就可以了，打開(kāi)插件管理頁(yè)面，具體操作請(qǐng)查看爬蟲可視化點(diǎn)選配置工具之chrome插件簡(jiǎn)介，然后打開(kāi)開(kāi)發(fā)者模式，再點(diǎn)擊加載已解壓的擴(kuò)展程序，如下圖：

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

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

chrome工具欄也會(huì)有對(duì)應(yīng)的插件圖標(biāo)：

此時(shí)打開(kāi)一個(gè)其他頁(yè)面點(diǎn)擊這個(gè)圖標(biāo)就會(huì)彈出我們要的框了，如下圖：

現(xiàn)在基本的框架已經(jīng)搭建好了，之后要做的就是在這個(gè)彈出框里繪制輸入框等元素了，這個(gè)步驟下回再分解了

以上源碼放在碼云，請(qǐng)自行查看吧

GPU云服務(wù)器云服務(wù)器開(kāi)發(fā)環(huán)境配置開(kāi)發(fā)環(huán)境搭建搭建開(kāi)發(fā)環(huán)境安卓開(kāi)發(fā)環(huán)境搭建

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/71721.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

impig33

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#雙11#cubecloud，全場(chǎng)VPS任意支付周期終身循環(huán)85折，可選中國(guó)香港CN2 GIA/美國(guó)

閱讀 935·2021-11-08 13:22
flaunt7：無(wú)視版權(quán)抗投訴vps,荷蘭VPS、荷蘭服務(wù)器5折優(yōu)惠碼

閱讀 2863·2021-09-29 09:45
spinservers中秋促銷：1Gbps不限流量服務(wù)器$179/月-雙E5-2630Lv3/64G

閱讀 2839·2021-09-09 11:52
入口還是危機(jī)？微信小程序已存在的撞庫(kù)風(fēng)險(xiǎn)

閱讀 2271·2019-08-30 13:20
奇技淫巧：css實(shí)現(xiàn)整個(gè)表單只讀 form readonly

閱讀 3757·2019-08-29 13:28
行內(nèi)格式化上下文(Inline formatting contexts)

閱讀 1375·2019-08-29 12:32
[譯]148個(gè)資源讓你成為CSS專家

閱讀 2736·2019-08-29 11:10
使用Mock.js生成前端測(cè)試數(shù)據(jù)

閱讀 1655·2019-08-26 13:34

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

可視化爬蟲配置chrome插件開(kāi)發(fā)之搭建vue開(kāi)發(fā)環(huán)境

相關(guān)文章

**關(guān)于Vue2一些值得推薦的文章 -- 五、六月份**

**關(guān)于Vue2一些值得推薦的文章 -- 五、六月份**

**爬蟲可視化點(diǎn)選配置工具之獲取鼠標(biāo)點(diǎn)選元素**

**爬蟲可視化點(diǎn)選配置工具之chrome插件簡(jiǎn)介**

發(fā)表評(píng)論

0條評(píng)論

impig33

男|高級(jí)講師

TA的文章

#雙11#cubecloud，全場(chǎng)VPS任意支付周期終身循環(huán)85折，可選中國(guó)香港CN2 GIA/美國(guó)

flaunt7：無(wú)視版權(quán)抗投訴vps,荷蘭VPS、荷蘭服務(wù)器5折優(yōu)惠碼

spinservers中秋促銷：1Gbps不限流量服務(wù)器$179/月-雙E5-2630Lv3/64G

入口還是危機(jī)？微信小程序已存在的撞庫(kù)風(fēng)險(xiǎn)

奇技淫巧：css實(shí)現(xiàn)整個(gè)表單只讀 form readonly

行內(nèi)格式化上下文(Inline formatting contexts)

[譯]148個(gè)資源讓你成為CSS專家

使用Mock.js生成前端測(cè)試數(shù)據(jù)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

可視化爬蟲配置chrome插件開(kāi)發(fā)之搭建vue開(kāi)發(fā)環(huán)境

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！