基于vue开发chrome插件，实现获取界面数据和保存到数据库功能

启晨1991
2,762 阅读7分钟

基于vue开发chrome插件，实现获取界面数据和保存到数据库功能

前言

最近在评估项目时，要开启评估平台，查看平台和保存平台，感觉非常繁琐，开发了一款可以获取评估平台数据，查看项目排期和直接保存数据到数据库的chrome插件，由于我需要使用之前vue封装的一个日历插件，这里就用vue来开发这个插件。

开发前准备

要开发一个chrome插件，我们首先需要了解chrome插件的基本结构和对应的功能。
每个扩展的文件类型和目录数量有所不同，但都必须有 manifest。 一些基本但有用的扩展程序可能仅由 manifest 及其工具栏图标组成。

manifest.json

  {
    "name": "My Extension",  // "扩展名"
    "version": "2.1", // 当前创建扩展版本号
    "description": "Gets information from Google.", //"扩展描述"
    "icons": {  // 扩展工具界面使用图标
      "128": "icon_16.png",
      "128": "icon_32.png",
      "128": "icon_48.png",
      "128": "icon_128.png"
    },
    "background": {  // 扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态
      "persistent": false,
      "scripts": ["background_script.js"]  // 后台常驻脚本，自动运行，直到关闭浏览器。可根据需求自行设置
    },
    "permissions": ["https://*.google.com/", "activeTab"],  //开启拓展权限
    "browser_action": { 
      "default_icon": "icon_16.png",   // 器右上角显示
      "default_popup": "popup.html"  /** 鼠标移入，显示简短扩展文本描述 **/
    },
     "content_scripts": [{   // ontent scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
    "js": ["script/contentscript.js"], /** 需要注入的脚本 **/
    "matches": [   /**  匹配网址(支持正则)，成功即注入（其余属性自行查询） **/
        "http://*/*",
        "https://*/*"
      ]
    }]
   }

vue开发chrome插件

我们需要使用vue来开发插件，几经搜索，查到一款样板，很方便我们进行vue开发插件，便引入该样板来进行开发。

引入vue-web-extension样板来实现vue开发

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

然后切换到项目目录安装依赖项

  cd new-tab-page
  npm install

我们可以运行

  npm run watch:dev

在项目根目录中会得到一个dist 文件夹，我们直接安装解压的扩展程序，选择这个dist,就可以进行开发并监视更改。

样板文件的基本格式

├── 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进行打包，

src文件夹包含我们将用于扩展的所有文件。manifest 文件和 background.js 对于我们来说是熟悉的，但也要注意包含Vue 组件的 popup 文件夹。当样板文件将扩展构建到 dist 文件夹中时，它将通过vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。

在 src 文件夹中还有一个 icons 文件夹。如果你看一眼 Chrome 的工具栏，会看到我们的扩展程序的新图标（也被称为 browser action）。这就是从此文件夹中拿到的。如果单击它，你应该会看到一个弹出窗口，显示“Hello world！” 这是由 popup/App.vue 创建的。

最后，请注 scripts 文件夹的两个脚本：一个用于删除 eval 用法以符合 Chrome Web Store 的内容安全策略，另一个用于当你要把扩展上传到Chrome Web Store时将其打包到 .zip 文件中。 在 package.json 文件中还声明了各种脚本。我们将用 npm run watch:dev 来开发扩展，然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。

创建插件界面

我们直接修改popup.html

popup.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <link href="popup.css" 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 获取当前页面的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，大家可以按需引入自己需要的组件。到这里，我们的插件界面基本搭建完成了。

获取当前界面数据，并在插件中进行监听

需要获取当前界面数据，就需要在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。就需要content_scripts里面引入我们需要的contentscript.js文件，在这个js文件中，可以获取浏览器所访问页面的详细信息

  "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);//发送消息   
        } else {
            alert('未查到该项目预排人员与预排时间，请点开插件或打开定制管理系统手动添加项目!')
        }
    }
});

这里获取元素就是js基本知识了。主要使用chrome插件的api

chrome.runtime.connect

  • 保持长期连接的模式，在content scripts与Chrome扩展程序页面之间建立通道（可以为通道命名），可以处理多个消息。在通道的两端分别拥有一个chrome.runtime.Port对象，用以收发消息。这里主要在我们点击需要的按钮时，就会向chrome插件发送消息。 在content scripts主动建立通道如下：
 var port = chrome.runtime.connect({name: "custommanage"});//通道名称
 port.postMessage({joke: "Knock knock"});//发送消息
 port.onMessage.addListener(function(msg) {//监听消息
     port.postMessage({answer: "custommanage"});
 });

获取到界面信息后，在content scripts发生请求消息给Google Chrome扩展程序，我们在插件中就需要获取获取的界面信息了

chrome扩展获取信息

我们在background.js中建立通道，获取web界面传回的信息

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函数即是保存我们获取的数据到数据库。

 /**
    * @desc 添加获取数据到数据库
    */
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函数来连接数据库，和修改数据库，后端接口也需要做一些跨域相关处理，才能正常连接，我这里用的Node开发的后端，大致代码如下

//跨域
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();
});

到此，获取界面数据，并自动保存到数据库功能已完成,background.js我们在manifest.json引用下。

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

我们需要将编辑好的插件通过webpack打包，还需要在webpack.config.js配置一下，然后运行npm run watch:dev 就可以得到我们需要的dist，安装到扩展程序就可使用了。

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;

我们数据改变后，如果想点开插件就查看对应界面，这里就按需引入我们需要的组件，来实现不同的界面展示。

最后附上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://*/*"
    ]
  }]
}

参考

www.cnblogs.com/champagne/p… www.jianshu.com/p/b3e544162… github.com/facert/chro…

avatar
文章
阅读
粉丝
相关推荐
了解Chrome插件开发：基础知识
77阅读
 · 
1点赞
Chrome 浏览器 Manifest V3 版本中 scripting API 解析
80阅读
 · 
2点赞
一个使用vue.js构建的纯静态chrome插件
1.5k阅读
 · 
51点赞
vue3+webpack开发chrome插件（MV3版本）
1.5k阅读
 · 
5点赞
Chrome 插件匹配模式（Match patterns）规则
119阅读
 · 
2点赞
Chrome 浏览器插件 runtime 字段解析
104阅读
 · 
2点赞
Chrome 浏览器插件 cookies API 解析
116阅读
 · 
2点赞
Chrome浏览器插件（扩展）- Manifest V3 插件开发规范简介
1.2k阅读
 · 
5点赞
15000字大章带你一步一步使用Vue3开发chrome浏览器插件 | 掘金年度征文
9.8k阅读
 · 
96点赞