利用Vue 脚手架 开发chrome 插件，太方便了
前言
一个 Chrome 插件，核心就是 manifest.json 文件，manifest.json 下的属性
content_scripts 指定inject的脚本列表 js，css 【 injected】
browser_action 中 default_popup指定popup弹出的html文件路径 【popup】
background 后台常驻页面 【background】
用户通过 popup 页面操作，inject 分析 DOM ，与 background 通信将数据传给 background 汇总，这个通信是很麻烦的。
vue开发 Chrome 插件优势
▍避免复杂的通信
原生的文件开发插件，需要使用
chrome.runtime.sendMessage({action:ACTION.START_FETCH,data:xxxx})来传递数据，就那么一两个还是可以的，但是往往我们要做的插件不能是这么简单的。通信多了就麻烦了，vue 就可以解决这个问题，不需要麻烦的通信。
▍DOM操作
开发插件不免不了用户交互，原生的 DOM 操作，document.getElementById() 这样来操作是麻烦的，vue 的双向绑定完美的决绝这个问题。
▎打包
vue 和 webpack实时打包 方便
vue初始化项目
前提是你已经安装了脚手架环境，这里不再演示
vue create hello-chrome-vue
这里默认选中的是vue2.0语法
Please pick a preset: Default ([Vue 2] babel, eslint)
✨ Creating project in E:\dev_workspace\webstorm_workspace\hello-chrome-vue.
利用Vue 脚手架 开发chrome 插件，太方便了相关推荐
- 使用 React.js 开发 Chrome 插件
(点击上方公众号,可快速关注) 来源:UncleChen unclechen.github.io/2017/06/16/使用ReactJS开发Chrome插件/ 一.背景 相信看到这篇文章的人应该都用 ...
- 一文教会你如何用Vue开发Chrome插件
前言 作为一个常年的B端前端开发者来说,千篇一律的业务开发有着些许的枯燥无味.在联调过程中,会经常发现后端在部署服务,然后又不知什么时候部署好,由于公司的部署系统查看系统部署状态入口较深,所以闲暇之余 ...
- 使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件 引言 初始Vue项目的创建 Element-Plus组件的安装及导入 其他文件配置 .eslintrc.js文件 vue.config.js ...
- 开发chrome 插件， background.js中 console log 看不到解决方法
开发chrome 插件, background.js中 console log 看不到解决方法 参考文章: (1)开发chrome 插件, background.js中 console log 看不到 ...
- blazor wasm开发chrome插件
用blazor(Wasm)开发了一个chrome插件感觉效率挺高的,分享给大家 先简单介绍下WebAssembly的原理: "WebAssembly是一种用于基于堆栈的虚拟机的二进制指令格式 ...
- 手机账号找回服务器,同步数据还能查找手机！Heytap账号太方便了，OPPO用户一定要Get...
原标题:同步数据还能查找手机!Heytap账号太方便了,OPPO用户一定要Get 众所周知,基本每一个品牌的手机系统都会提供专属该品牌的账号注册功能,用户注册的账户信息将会存放在品牌官方的服务器里,用 ...
- 南昌地铁信息化服务器,南昌地铁传来大消息！太方便了！
原标题:南昌地铁传来大消息!太方便了! 为积极响应新时代 "互联网+"浪潮 提升乘客出行体验 打造"智慧地铁" 南昌地铁正式开通互联网购票业务 为广大乘客提供更 ...
- Windows环境下用python嵌入式环境跑程序可太方便了
Windows环境下用python嵌入式环境跑程序可太方便了 1. 嵌入式包默认的文件夹设置 2. 建立python环境文件夹 3. 添加python索引包路径 4. 安装pip和requiremen ...
- html5一键导航,“一键导航”，太方便了！
为解决群众办事不知道"到哪办.怎么办"问题,在"听民声.走流程"体验活动中,市行政审批服务局研发了政务办事导航地图,并在"爱山东·日照通"A ...
最新文章
- 010_jQuery获取和设置内容属性
- 替换弹窗中字段显示的值
- 分布式机器学习_京东出来的java工程师，竟然不知道分布式、高并发、多线程的区别？...
- react 组件怎么公用_React、Redux与复杂业务组件的复用
- 电脑无线网络与服务器共享,图文详解win7笔记本如何实现内置无线局域网卡共享...
- MySQL表设计基础
- 改善你的生活品质，可以从一块小小的单片机开始
- Vue学习笔记----基础
- 管理感悟：不要过度自我合理化
- 基于ADS仿真的465khz检波电路
- mysql好玩的代码_搞一些好玩的东西redis
- 2022道路运输企业安全生产管理人员考试题及答案
- sql 查询in的集合元素过多优化方式
- Java Springboot 使用 OpenOffice 实现Excel转PDF
- Docker容器启动报WARNINGIPv4 forwarding
- js中isFinite
- 被高通裁员两次，清华毕业华裔工程师跳楼身亡！中年IT男，为何这么难？
- 最全前端资源---快过来 最新鲜的资源这里都有
- android手机震动
- 机器人基础技术教学_乒乓球推挡技术完整攻略[基础教学]
热门文章