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=\"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 获取当前页面的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://*/*\"
  ]
 }]
}

以上就是vue开发chrome插件，实现获取界面数据和保存到数据库功能的详细内容，更多关于vue开发chrome插件的资料请关注其它相关文章！

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论