摘要:使用開發(fā)插件的好處本次開發(fā)的插件是抓取配置插件,有很多的表單以及彈出層,如果純使用的話會有很多動態(tài)創(chuàng)建的操作。使用和的語法以及的加載器相配合,可以減少大量動態(tài)創(chuàng)建的代碼。
使用vue開發(fā)chrome插件的好處
本次開發(fā)的插件是抓取配置插件,有很多的form表單以及彈出層,如果純使用js的話會有很多動態(tài)創(chuàng)建dom的操作。使用vue和ES6的import語法以及webpack的html加載器相配合,可以減少大量動態(tài)創(chuàng)建dom的代碼。
vue環(huán)境搭建 工作準備請安裝node.js(新版自帶npm包管理工具)
建議安裝cnpm淘寶鏡像,安裝依賴的時候會更快一些
# -g 安裝在全局 registry指定國內(nèi)下載地址 $ 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官方文檔
腳手架創(chuàng)建打開命令行,進入到你的工作空間,我們使用vue腳手架來搭建項目
# 創(chuàng)建一個基于 `webpack` 模板的新項目 $ vue init webpack chromespidercfg # 創(chuàng)建過程會要求你的項目起名(**注意現(xiàn)在項目名不支持駝峰式命名**)之類,由于是簡單的頁面,所以vue-router之類的就不裝了,后面有我的運行截圖 $ cd chromespidercfg $ cnpm install $ npm run dev
訪問頁面 localhost:8080 出來頁面了就算成功了,Ctrl + C y確認退出
下面是我創(chuàng)建項目的截圖:
如果你想要使用vue開發(fā)單頁面程序,那么這個頁面已經(jīng)搭建好了,但是我們要做的是chrome插件開發(fā),所以還需要做一些配置chrome插件必要文件
chrome開發(fā)需要一些必要的文件,比如manifest.json,我們要創(chuàng)建一下
在目錄下創(chuàng)建chrome文件夾,名字隨便起,我在這里起名叫chrome是因為我的vue編譯配置中用的是這個名字,現(xiàn)在的目錄結(jié)構(gòu)如下:
現(xiàn)在進入剛剛創(chuàng)建的chrome目錄,創(chuàng)建一個manifest.json文件和runbackground.min.js文件,以及一個icons文件夾,這個icons文件夾是放圖標的,chrome文件夾結(jié)構(gòu)如下:
manifest.json文件就是插件的主要配置了,具體的配置可以查看我的另一篇文章爬蟲可視化點選配置工具之chrome插件簡介,如下:
{ "background": { "scripts": ["runbackground.min.js"] }, "browser_action": { "default_icon": "./icons/icon.png", "default_title": "簡單爬,簡簡單單采集你的數(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": "爬蟲可視化點選配置工具,簡簡單單采集你的數(shù)據(jù)", "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]; }); /* 插件啟動,創(chuàng)建爬蟲任務 */ 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字段修改成以下內(nèi)容,這就是編譯之后的文件
entry: { paApa: "./src/main.js", connector: "./src/js/connector.js" }
在module的rules添加以下內(nèi)容,一個是加載css的,一個是加載html的:
{ test: /.css$/, use: [ "style-loader", "css-loader" ] }, { test: /.html$/, use: [{ loader: "html-loader" }], }
將webpack.prod.conf.js文件修改成以下內(nèi)容,為什么要這么改請自行查看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,這就會將上面創(chuàng)建的chrome拷貝到編譯后的目錄中
修改完配置,還要安裝幾個插件,分別是html和css加載器,以及jquery:
npm install html-loader style-loader jquery -D
到此為止,環(huán)境基本上搭建完成了,下面就是寫代碼了
編寫基本的代碼框架由于插件中主要用到了彈出層,我這里用的是layer.js,當然是修改過的,支持ES6的導入和導出,layer.css,layer.js,當然也可以自己寫一個或者使用其他的彈出層組件
進入src目錄,修改main.js為以下內(nèi)容,作用就是打開一個彈出層
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: "", 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這個文件,這個文件的作用其實就是作為通信用的,現(xiàn)在可以在js目錄下創(chuàng)建一個connector.js文件,然后隨便輸出個內(nèi)容就可以了
安裝測試完成以上步驟就可以測試一下了
在根目錄執(zhí)行以下命令:
npm run build
出現(xiàn)下圖就證明已經(jīng)執(zhí)行成功了
此時跟目錄中會多一個dist目錄,這就是執(zhí)行的結(jié)果,然后打開chrome瀏覽器安裝插件就可以了,打開插件管理頁面,具體操作請查看爬蟲可視化點選配置工具之chrome插件簡介,然后打開開發(fā)者模式,再點擊加載已解壓的擴展程序,如下圖:
之后再選擇dist目錄中的chrome文件夾即可,如下圖:
安裝成功的話會在插件列表看到下圖:
chrome工具欄也會有對應的插件圖標:
此時打開一個其他頁面點擊這個圖標就會彈出我們要的框了,如下圖:
現(xiàn)在基本的框架已經(jīng)搭建好了,之后要做的就是在這個彈出框里繪制輸入框等元素了,這個步驟下回再分解了
以上源碼放在碼云,請自行查看吧
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/71721.html
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:類型指定可能被其他元素包含的后代元素。這樣頁面選擇函數(shù)就寫完了,下面就是引用了,在中添加函數(shù)點擊以上就完成了頁面選擇功能 前言 前面兩章已經(jīng)介紹怎么開發(fā)一個chrome插件和怎么使用vue搭建一個彈出框的chrome插件,這一章來實現(xiàn)頁面元素選擇的功能,效果如下圖,鼠標放到元素上,元素會高亮: showImg(https://segmentfault.com/img/bVbilIx?w...
摘要:從右上角菜單更多工具擴展程序可以進入插件管理頁面,也可以直接在地址欄輸入訪問。其中,個是必不可少的,和是推薦的。 什么是Chrome插件 Chrome插件是一個用Web技術(shù)開發(fā)、用來增強瀏覽器功能的軟件,它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx后綴的壓縮包. 開發(fā)與調(diào)試 Chrome插件沒有嚴格的項目結(jié)構(gòu)要求,只要保證本目錄有一個manifest.json即...
閱讀 917·2021-11-08 13:22
閱讀 2841·2021-09-29 09:45
閱讀 2824·2021-09-09 11:52
閱讀 2257·2019-08-30 13:20
閱讀 3740·2019-08-29 13:28
閱讀 1356·2019-08-29 12:32
閱讀 2720·2019-08-29 11:10
閱讀 1644·2019-08-26 13:34