vue開發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫功能

更新時(shí)間：2020年12月01日 10:33:27 作者：啟晨1991

這篇文章主要介紹了vue開發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

前言

最近在評(píng)估項(xiàng)目時(shí)，要開啟評(píng)估平臺(tái)，查看平臺(tái)和保存平臺(tái)，感覺非常繁瑣，開發(fā)了一款可以獲取評(píng)估平臺(tái)數(shù)據(jù)，查看項(xiàng)目排期和直接保存數(shù)據(jù)到數(shù)據(jù)庫的chrome插件，由于我需要使用之前vue封裝的一個(gè)日歷插件，這里就用vue來開發(fā)這個(gè)插件。

開發(fā)前準(zhǔn)備

要開發(fā)一個(gè)chrome插件，我們首先需要了解chrome插件的基本結(jié)構(gòu)和對應(yīng)的功能。
每個(gè)擴(kuò)展的文件類型和目錄數(shù)量有所不同，但都必須有 manifest。一些基本但有用的擴(kuò)展程序可能僅由 manifest 及其工具欄圖標(biāo)組成。

manifest.json

 {
  "name": "My Extension", // "擴(kuò)展名"
  "version": "2.1", // 當(dāng)前創(chuàng)建擴(kuò)展版本號(hào)
  "description": "Gets information from Google.", //"擴(kuò)展描述"
  "icons": { // 擴(kuò)展工具界面使用圖標(biāo)
   "128": "icon_16.png",
   "128": "icon_32.png",
   "128": "icon_48.png",
   "128": "icon_128.png"
  },
  "background": { // 擴(kuò)展常常用一個(gè)單獨(dú)的長時(shí)間運(yùn)行的腳本來管理一些任務(wù)或者狀態(tài)
   "persistent": false,
   "scripts": ["background_script.js"] // 后臺(tái)常駐腳本，自動(dòng)運(yùn)行，直到關(guān)閉瀏覽器?？筛鶕?jù)需求自行設(shè)置
  },
  "permissions": ["https://*.google.com/", "activeTab"], //開啟拓展權(quán)限
  "browser_action": { 
   "default_icon": "icon_16.png",  // 器右上角顯示
   "default_popup": "popup.html" /** 鼠標(biāo)移入，顯示簡短擴(kuò)展文本描述 **/
  },
   "content_scripts": [{  // ontent scripts是在Web頁面內(nèi)運(yùn)行的javascript腳本。通過使用標(biāo)準(zhǔn)的DOM，它們可以獲取瀏覽器所訪問頁面的詳細(xì)信息，并可以修改這些信息。
  "js": ["script/contentscript.js"], /** 需要注入的腳本 **/
  "matches": [  /** 匹配網(wǎng)址(支持正則)，成功即注入（其余屬性自行查詢） **/
    "http://*/*",
    "https://*/*"
   ]
  }]
  }

vue開發(fā)chrome插件

我們需要使用vue來開發(fā)插件，幾經(jīng)搜索，查到一款樣板，很方便我們進(jìn)行vue開發(fā)插件，便引入該樣板來進(jìn)行開發(fā)。

引入vue-web-extension樣板來實(shí)現(xiàn)vue開發(fā)

 npm install -g @vue/cli
 npm install -g @vue/cli-init
 vue init kocal/vue-web-extension new-tab-page

然后切換到項(xiàng)目目錄安裝依賴項(xiàng)

 cd new-tab-page
 npm install

我們可以運(yùn)行

 npm run watch:dev

在項(xiàng)目根目錄中會(huì)得到一個(gè)dist 文件夾，我們直接安裝解壓的擴(kuò)展程序，選擇這個(gè)dist,就可以進(jìn)行開發(fā)并監(jiān)視更改。

樣板文件的基本格式

├── dist
│ └── <the built extension>
├── node_modules
│ └── <one or two files and folders>
├── package.json
├── package-lock.json
├── scripts
│ ├── build-zip.js
│ └── remove-evals.js
├── src
│ ├── background.js
│ ├── icons
│ │ ├── icon_128.png
│ │ ├── icon_48.png
│ │ └── icon.xcf
│ ├── manifest.json
│ └── popup
│ ├── App.vue
│ ├── popup.html
│ └── popup.js
└── webpack.config.js

可以看出，樣板文件使用 webpack進(jìn)行打包，

src文件夾包含我們將用于擴(kuò)展的所有文件。manifest 文件和 background.js 對于我們來說是熟悉的，但也要注意包含Vue 組件的 popup 文件夾。當(dāng)樣板文件將擴(kuò)展構(gòu)建到 dist 文件夾中時(shí)，它將通過vue-loader 管理所有 .vue 文件并輸出一個(gè)瀏覽器可以理解的 JavaScript 包。

在 src 文件夾中還有一個(gè) icons 文件夾。如果你看一眼 Chrome 的工具欄，會(huì)看到我們的擴(kuò)展程序的新圖標(biāo)（也被稱為 browser action）。這就是從此文件夾中拿到的。如果單擊它，你應(yīng)該會(huì)看到一個(gè)彈出窗口，顯示“Hello world！” 這是由 popup/App.vue 創(chuàng)建的。

最后，請注 scripts 文件夾的兩個(gè)腳本：一個(gè)用于刪除 eval 用法以符合 Chrome Web Store 的內(nèi)容安全策略，另一個(gè)用于當(dāng)你要把擴(kuò)展上傳到Chrome Web Store時(shí)將其打包到 .zip 文件中。

在 package.json 文件中還聲明了各種腳本。我們將用 npm run watch:dev 來開發(fā)擴(kuò)展，然后使用 npm run build-zip 生成一個(gè)ZIP文件以上傳到 Chrome Web Store。

創(chuàng)建插件界面

我們直接修改popup.html

popup.html

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <link href="popup.css" rel="external nofollow" rel="stylesheet">
 <div id="app">
 </div>
 <script src="popup.js"></script>
</body>
</html>

這里我們引入popup.css和popup.js 在popup.css放入我們需要用的樣式在popup.js中，來引入我們的vue文件

popup.js

 import Vue from 'vue'
 import { Tabs,TabPane, Dialog, Button,Form,FormItem,Input,DatePicker,Message,Alert,Tooltip,MessageBox } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import App from './App'
 Vue.use(Tabs);
 Vue.use(TabPane);
 Vue.use(Dialog);
 Vue.use(Button);
 Vue.use(Form);
 Vue.use(FormItem);
 Vue.use(Input);
 Vue.use(DatePicker);
 Vue.use(Tooltip);
 Vue.use(Alert);
 Vue.prototype.$message = Message;
 Vue.prototype.$confirm = MessageBox.confirm;
 new Vue({
  el: '#app',
  render: h => h(App)
 })

這里，我們主要按需引入element-ui中的控件，和app.vue組件

app.vue

 <template>
 <div id="app" style="height: 580px;overflow-y: hidden;width:680px;">
  <div>
   模板
  </div>
  <customPlan :projectData="projectData" :loginPerson="loginPerson"></customPlan>
 </div>
</template>

<script>
import customPlan from '../components/customPlan'
let { Pinyin } = require('../script/pinyin')
let pinyin = new Pinyin()
export default {
 components: { customPlan },
 data() {
  return {
   loginPerson: '',
   projectData: {
    departmentName: '',
    developer: '',
    endDate: '',
    evaluator: '',
    isDeprecated: false,
    isIncludeSaturday: false,
    isNewComponent: false,
    issureAdress: '',
    msg: '',
    name: '',
    startDate: '',
    workDay: '',
    year: 2020
   }
  }
 },
 created() {
  this.getUrl()
 },
 methods: { 
  getCaption(obj) {
   var index = obj.lastIndexOf('，')
   obj = obj.substring(index + 1, obj.length)
   return obj
  },
  /**  
  * @desc 獲取當(dāng)前頁面的url
  */
  getUrl() {
   chrome.tabs.getSelected(null, tab => {
    console.log(tab,"tab")
    this.projectData.issureAdress = tab.url
    chrome.tabs.sendMessage(tab.id, { greet: 'hello' }, response => {
     if (response && response.developer && response.processName) {
      let developer = pinyin
       .getFullChars(this.getCaption(response.developer))
       .toLowerCase()
      this.projectData.evaluator = developer
      this.projectData.name = response.processName
     } else if (response && response.developer && !response.processName) {
      var index = response.developer.lastIndexOf('@')
      response.developer = response.developer.substring(
       index + 1,
       response.developer.length
      )
      this.loginPerson = response.loginPerson
      this.projectData.evaluator = response.developer
      this.projectData.name =response.peocessName
     }
    })
   })
  }
 }
}
</script>

在manifest.json中引入

  "browser_action": {
   "default_title": "測試",
   "default_popup": "popup/popup.html"
  },

這里我們主要引入了我們的日歷控件customPlan，大家可以按需引入自己需要的組件。到這里，我們的插件界面基本搭建完成了。

獲取當(dāng)前界面數(shù)據(jù)，并在插件中進(jìn)行監(jiān)聽

需要獲取當(dāng)前界面數(shù)據(jù)，就需要在Web頁面內(nèi)運(yùn)行的javascript腳本。通過使用標(biāo)準(zhǔn)的DOM，它們可以獲取瀏覽器所訪問頁面的詳細(xì)信息，并可以修改這些信息。就需要content_scripts里面引入我們需要的contentscript.js文件，在這個(gè)js文件中，可以獲取瀏覽器所訪問頁面的詳細(xì)信息

 "content_scripts": [{
  "js": ["script/contentscript.js"],
  "matches": [
   "http://*/*",
   "https://*/*"
  ]
 }]

contentscript.js文件配置如下

document.addEventListener('click', function (e) {
  let isCurrect = e.path.length > 3&&e.path[4].innerText&&e.path[4].innerText.indexOf('提交需求') != -1 && e.target.innerText === '確 定' && document.getElementsByClassName('layout-nav') && document.getElementsByClassName('layout-nav')[0].children
  if (isCurrect) {
    if (document.getElementsByClassName('user-table') && document.getElementsByClassName('user-table')[0] && document.getElementsByClassName('user-table')[0].getElementsByClassName('el-table__row').length > 0) {
      var port = chrome.runtime.connect({ name: "custommanage" });//通道名稱
      let loginPerson = document.getElementsByClassName('layout-nav') && document.getElementsByClassName('layout-nav')[0].children ? document.getElementsByClassName('layout-nav')[0].children[0].innerText : ''
      let partMentName = document.getElementsByClassName('layout-nav') && document.getElementsByClassName('layout-nav')[0].children ? document.getElementsByClassName('layout-nav')[0].children[3].innerText : ''
      let processName = document.getElementsByClassName('el-input__inner') && document.getElementsByClassName('layout-nav')[0].children ? document.getElementsByClassName('el-input__inner')[0].title : ''
      let tableElement = document.getElementsByClassName('user-table') ? document.getElementsByClassName('user-table')[0].getElementsByClassName('el-table__row') : []
      let choseSelect = []
      for (let value of tableElement) {
        if (value.innerText.indexOf(partMentName) !== -1) {
          choseSelect = value
        }
      }
      let developPerson = ''
      let startTime = ''
      let endTime = ''
      if (choseSelect && choseSelect.getElementsByTagName('td')) {
        developPerson = choseSelect.getElementsByTagName('td')[1].innerText
        startTime = choseSelect.getElementsByTagName('td')[3].getElementsByTagName('input')[0].title
        endTime = choseSelect.getElementsByTagName('td')[4].getElementsByTagName('input')[0].title
      }
      let item = {
        "loginPerson": loginPerson,
        "processName": processName,
        "developPerson": developPerson,
        "startTime": startTime,
        "endTime": endTime
      }
      port.postMessage(item);//發(fā)送消息  
    } else {
      alert('未查到該項(xiàng)目預(yù)排人員與預(yù)排時(shí)間，請點(diǎn)開插件或打開定制管理系統(tǒng)手動(dòng)添加項(xiàng)目!')
    }
  }
});

這里獲取元素就是js基本知識(shí)了。主要使用chrome插件的api

chrome.runtime.connect

保持長期連接的模式，在content scripts與Chrome擴(kuò)展程序頁面之間建立通道（可以為通道命名），可以處理多個(gè)消息。在通道的兩端分別擁有一個(gè)chrome.runtime.Port對象，用以收發(fā)消息。這里主要在我們點(diǎn)擊需要的按鈕時(shí)，就會(huì)向chrome插件發(fā)送消息。
在content scripts主動(dòng)建立通道如下：

 var port = chrome.runtime.connect({name: "custommanage"});//通道名稱
 port.postMessage({joke: "Knock knock"});//發(fā)送消息
 port.onMessage.addListener(function(msg) {//監(jiān)聽消息
   port.postMessage({answer: "custommanage"});
 });

獲取到界面信息后，在content scripts發(fā)生請求消息給Google Chrome擴(kuò)展程序，我們在插件中就需要獲取獲取的界面信息了

chrome擴(kuò)展獲取信息

我們在background.js中建立通道，獲取web界面?zhèn)骰氐男畔?/p>

chrome.tabs.query(
 { active: true, currentWindow: true },
 function (tabs) {
  var port = chrome.tabs.connect(//建立通道
   tabs[0].id,
   { name: "custommanage" }//通道名稱
  );
 });
chrome.runtime.onConnect.addListener((port) => {
 console.assert(port.name == "custommanage");
 port.onMessage.addListener((res) => {  
   addActon(res)
 });
});

addAction函數(shù)即是保存我們獲取的數(shù)據(jù)到數(shù)據(jù)庫。

 /**
  * @desc 添加獲取數(shù)據(jù)到數(shù)據(jù)庫
  */
function addProject (params) {  
   let paramsObj = Object.assign({}, params)
   let optsUpdata = {
    method: 'POST', //請求方法
    body: JSON.stringify(paramsObj), //請求體
    headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json'
    }
   }
   fetch('http://****/api/EditConfirmWork', optsUpdata)
    .then(response => {
     return response.json()
    })
    .then(data => {
     if (data.code === 0) {
      alert('更新成功!')
     }
    })
    .catch(error => {
     alert(error)
    })
}

這里我們采用fetch函數(shù)來連接數(shù)據(jù)庫，和修改數(shù)據(jù)庫，后端接口也需要做一些跨域相關(guān)處理，才能正常連接，我這里用的Node開發(fā)的后端，大致代碼如下

//跨域
app.all('*', function (req, res, next) {
 res.header("Access-Control-Allow-Origin", "*"); 
 res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
 res.header('Access-Control-Allow-Credentials', true)
 next();
});

到此，獲取界面數(shù)據(jù)，并自動(dòng)保存到數(shù)據(jù)庫功能已完成,background.js我們在manifest.json引用下。

"background": {
  "scripts": ["script/background.js"]
 },

我們需要將編輯好的插件通過webpack打包，還需要在webpack.config.js配置一下，然后運(yùn)行npm run watch:dev 就可以得到我們需要的dist，安裝到擴(kuò)展程序就可使用了。

webpack.config.js配置如下

const webpack = require('webpack');
const ejs = require('ejs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
const { VueLoaderPlugin } = require('vue-loader');
const { version } = require('./package.json');

const config = {
 mode: process.env.NODE_ENV,
 context: __dirname + '/src',
 entry: {
  'popup/popup': './popup/popup.js',
  'script/contentscript': './script/contentscript.js',
  'script/background': './script/background.js'
 },
 output: {
  path: __dirname + '/dist',
  filename: '[name].js',
 },
 resolve: {
  extensions: ['.js', '.vue'],
 }, 
 module: {
  rules: [
   {
    test: /\.vue$/,
    loaders: 'vue-loader',
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
   },
   {
    test: /\.css$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
   },
   {
    test: /\.scss$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
   },
   {
    test: /\.sass$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'],
   },
   {
    test: /\.(png|jpg|gif|svg|ico)$/,
    loader: 'file-loader',
    options: {
     name: '[name].[ext]?emitFile=false',
    },
   },
   {
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
    loader: 'url-loader',
    options: {
     esModule: false,
     limin: 10000,
     name: "font/[name].[hash:8].[ext]"
    }
   }
  ],
 },
 plugins: [  
  new VueLoaderPlugin(),
  new MiniCssExtractPlugin({
   filename: '[name].css',
  }),
  new CopyWebpackPlugin([
   { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
   { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
   {
    from: 'manifest.json',
    to: 'manifest.json',
    transform: (content) => {
     const jsonContent = JSON.parse(content);
     jsonContent.version = version;

     if (config.mode === 'development') {
      jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
     }

     return JSON.stringify(jsonContent, null, 2);
    },
   },
  ])
 ],
};

if (config.mode === 'production') {
 config.plugins = (config.plugins || []).concat([
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"',
   },
  }),
 ]);
}

if (process.env.HMR === 'true') {
 config.plugins = (config.plugins || []).concat([
  new ChromeExtensionReloader(),
 ]);
}

function transformHtml(content) {
 return ejs.render(content.toString(), {
  ...process.env,
 });
}

module.exports = config;

我們數(shù)據(jù)改變后，如果想點(diǎn)開插件就查看對應(yīng)界面，這里就按需引入我們需要的組件，來實(shí)現(xiàn)不同的界面展示。

最后附上manifest.json完整的配置

 {
 "name": "插件",
 "description": "描述",
 "version": 2.0,
 "manifest_version": 2,
 "icons": {
  "48": "icons/icon_426.png",
  "128": "icons/icon_426.png"
 },
 "browser_action": {
  "default_title": "插件",
  "default_popup": "popup/popup.html"
 },
 "permissions": [
  "tabs",
  "<all_urls>"
 ],
 "background": {
  "scripts": ["script/background.js"]
 },
 "content_scripts": [{
  "js": ["script/contentscript.js"],
  "matches": [
   "http://*/*",
   "https://*/*"
  ]
 }]
}

以上就是vue開發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫功能的詳細(xì)內(nèi)容，更多關(guān)于vue開發(fā)chrome插件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: