言

为了前端体验更加友好，减缓用户的焦虑情绪，提升项目质量等，我们在项目里面可以使用骨架屏，提前渲染出来一个跟正式页面相似的页面出来，减小首屏加载时间。

在vue中使用骨架屏

因为我们的代码会使用webpack打包，所以在我们的js下载运行之前，用户是无法在页面上看到信息，所以，我们要把骨架屏相关的代码放到HTML里面，当然，可以把代码直接写在html文件的<div id=’app‘></div>里面，但是为了维护我们进行开发时的体验，我们在开发时可以使用一个webpack插件，来像开发组件一样来开发骨架屏。

1.添加vue-skeleton-webpack-plugin插件

npm install vue-skeleton-webpack-plugin

2.新建我们的骨架组件

首先在我们的项目中新建一个.vue文件，用来写我们的骨架屏，我这里是在app.vue同级目录下新建了一个Skeleton.vue,里面可以写我们的骨架屏代码；

<template>
 <div class="skeleton-wrapper">
 <section class="skeleton-block">
 <!-- eslint-disable vue/max-len -->
 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
 </section>
 </div>
</template>
<script>
export default {
 name: 'Skeleton',
};
</script>
<style scoped>
.skeleton-block {
 display: flex;
 flex-direction: column;
 padding: 16px;
 background:#f7f7f7;
}
</style>

在这个页面里面我们可以根据需要来编写代码，最好使用样式或者base64的图片，以减少初始的请求。

3.把我们的骨架屏文件引入到vue里面

在main.js同级新建一个Skeleton.js文件引入的Skeleton.vue，并把它引入到vue；

// - Skeleton.js
import Vue from 'vue';
import Skeleton from './Skeleton.vue';
export default new Vue({
 components: {
 Skeleton,
 },
 render: h=> h(Skeleton),
});

4.配置打包方案

在项目根目录新建vue.config.js,在里面配置vue-skeleton-webpack-plugin插件，并开启css分离；

const path=require('path');
const SkeletonWebpackPlugin=require('vue-skeleton-webpack-plugin');
module.exports={
 configureWebpack: (config)=>{
 config.plugins.push(new SkeletonWebpackPlugin({
 webpackConfig: {
 entry: {
 app: path.join(__dirname, './src/skeleton.js'),
 },
 },
 minimize: true,
 quiet: true,
 })) 
 },
 // css相关配置
 css: {
 // 是否使用css分离插件 ExtractTextPlugin
 extract: true,
 // 开启 CSS source maps?
 sourceMap: false,
 // 启用 CSS modules for all css / pre-processor files.
 modules: false
 },
};

5.在浏览器中查看效果

因为网络快的时候，我们是不显示骨架屏的，所以要把我们的浏览器网络调慢一点（调整为solw 3G），以方便我们开发和调试；

我们会看到骨架屏先被渲染出来，然后才会有我们的页面渲染出来；

1. 根据路由来渲染不同的骨架
2. vue-skeleton-webpack-plugin框架是支持根据不同路由来渲染不同的骨架屏的，附上地址：
3. vue-skeleton-webpack-plugin插件地址

小结

首先感谢各位大牛为社区所做的贡献，这才使我们在遇到问题时有了更好的解决方案，其次附上我的demo链接，方便大家体验，并且在该demo中还有关于vue-i18n国际化的使用。

demo链接：https://gitee.com/webh5/skeletonAndI18n

感谢您的阅读，欢迎评论和关注哦！

作者：Yinzhishan

链接：https://www.jianshu.com/p/cb5717c5948f

景

最近在做中后台相关页面中涉及到录入大量的姓名，手机号码，身份证号码来生成订单，昏天黑地。往往出现bug的页面都是在录入一大堆信息之后才显示。

在开发前期时，对录入input框的内容不做限制的时候，可以随便输入111,222，测试之类的内容，虽然不好看，但是也可以快速录入，但当开发结束进入联调和反馈bug的时候，增加了对身份证号码的正确性校验，增加了手机号码的长度和区号校验，录入资料的时候还要想想。虽然比较简单，但是谁让咱比较懒呢。

其中一种解决方案是在代码中针对debug情况都自动录入默认测试数据。 另一种就是今天拍脑门的方案，做个chrome插件，直接在input框上右键选择随机姓名，随机手机号，随机身份证号码就可以快速录入合格数据，而且插件也可以分享给测试的小伙伴，也记录下chrome插件开发的流程，方便未来制作新的小插件。

基础manifest.json文件讲解

manifest.json是chrome开发指定的配置文件，指明了很多扩展信息，所以开发插件先上这个文件。

{
 "name": "MockInput", //插件名称
 "version": "1.01", //插件版本
 "manifest_version": 2, //manifest文件版本号，填2就是了
 "description": "右键录入输入框数据，烦人的手动输入", //插件描述信息
 "icons": { //拓展图标，
 "16": "image/icon-16.png",
 "48": "image/icon-48.png",
 "128": "image/icon-128.png"
 }, 
 "browser_action": { //在地址栏右侧显示信息，包含图标和弹出页面的设置。
 "default_icon": "image/icon-128.png",
 "default_title": "右键输入mock数据",
 "default_popup": "html/browser.html"
 },
 "page_action": { //地址栏最后附加图标。含图标及行为等
 "default_icon": "image/icon-48.png",
 "default_title": "Test",
 "default_popup": "html/page.html"
 },
 "background": { //指定扩展进程的background运行环境
 "scripts": [
 "js/menu.js"
 ]
 },
 "content_scripts": [ //注入web页面运行的脚本和样式。
 {
 "matches": [
 "*://*/*"
 ],
 "js": [
 "js/content.js"
 ]
 }
 ],
 "homepage_url": "https://notes.tingno.com", //主页地址
 "incognito": "spanning", 
 "offline_enabled": true, 
 "options_page": "html/setting.html", //设置选项页面
 "options_ui":{
 "page": "html/setting.html",
 "chrome_style": true
 },
 "permissions": [ //申请权限
 "*://*/*",
 "contextMenus",
 "tabs",
 "activeTab",
 "storage",
 "notifications"
 ]
}

我这边用到的也就上面这些信息，直接帖进去载入chrome有错误的话，浏览器会进行提示。

这里特别说明content_scripts文件是在指定域名后进行脚本和样式的注入，大部分插件主要依赖这个部分。可以修改页面。

增加右键菜单

首先在配置文件的permissions中申请右键权限contextMenus，以及对应的增加扩展环境background的选项，见前面配置文件。 路径按照相对路径进行填写就行。

然后在对应的文件（我这里是js/menu.js）中添加增加菜单内容，需要多增加几个菜单就多create几个。

chrome.contextMenus.create({
 type: 'normal',
 title: '模拟数据插入',
 id: 'menuDemo',
 contexts: ['editable']
});

create第一个参数是options对象，对应的内容

• id (文本) 必备，子菜单可以指定父菜单项ID
• type ( 枚举值：["normal", "checkbox", "radio", "separator"] )右键菜单项的类型。默认为“normal”。
• title ( 文本 ) 右键菜单项的显示文字；除非类型为“separator”类否则此参数是必须的。如果类型为“selection”，您可以在字符串中使用%s显示选定的文本。例如，如果参数的值为 "Translate '%s' to Pig Latin"，而用户还选中了文本“cool”，那么显示在菜单中的将会是 "Translate 'cool' to Pig Latin"。
• checked ( optional boolean )Checkbox或者radio的初始状态：true代表选中，false代表未选中。在给定的radio中只能有一个处于选中状态。
• contexts ( optional array of string ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] )右键菜单项将会在这个列表指定的上下文类型中显示。默认为“page”。
• onclick ( optional function )当菜单项被点击时触发的函数。
• 参数info ( OnClickData )右键菜单项被点击时相关的上下文信息。 参数tab ( Tab )右键菜单项被点击时，当前标签的详细信息。
• parentId ( optional integer )右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单。
• documentUrlPatterns ( optional array of string )这使得右键菜单只在匹配此模式的url页面上生效（这个对框架也适用）。详细的匹配格式见：模式匹配页面。
• targetUrlPatterns ( optional array of string )类似于documentUrlPatterns，但是您可以针对img/audio/video标签的src属性和anchor标签的href做过滤。
• enabled ( optional boolean )启用或者禁用此菜单项，启用为true，禁用为false。默认为true。

create还包含一个回调函数，在创建完菜单项后触发。如果创建过程中有错误产生，其详细信息在Chrome.extension.lastError中。

我的需求里面包含随机姓名、随机手机号、随机身份证、指定姓名、指定手机号、指定身份证。一个总菜单，带6个子菜单，而且默认我们只是在输入框右键的时候，需要弹出菜单，其他地方没啥用。

在总菜单之后，加上子菜单。

//子菜单带上
chrome.contextMenus.create({
 type: 'normal',
 title: '随机证件号',
 id: 'randomPerson',
 parentId: 'menuDemo',
 contexts: ['editable'],
 onclick: genericOnClick
});

出来效果是什么样子的呢？

点击子菜单之后，要将点击了哪个菜单推送到页面中去，方便页面进行操作。

sendMessage，onMessage消息传递

由于右键点击菜单逻辑是在backgroud里面实现，而具体的元素输入是在具体的tab实现。tab向background发送消息的话，就一个不需要指定。而background发送消息的话，就需要指定具体哪个tab，并且在对应的页面进行接收。

发送的话，是在右键菜单的onclick函数genericOnClick中实现。前面也不知道具体用到啥，全送过去再说。而且onclick的参数句柄上也已经给定了是哪个页面点击右键，发回去就行了。

function genericOnClick(info, tab) {
 chrome.tabs.sendMessage(tab.id, {'tab':tab, 'info': info });
}

然后就是在具体的content.js中接收消息，加一个监听。拿到具体的内容进行打印就行了。

chrome.extension.onMessage.addListener(function(request, _, response) {
 console.log(request)
});

元素绑定

对应的事件传递到当前的话，就可以生成对应的随机值，然后输入页面就可以了。不过由于时间短暂，所以没找到回传具体右键点击了什么元素，只能在页面进行注入，右键的时候，指定下具体点击的是哪个元素。目前插件只需要input,所以给所有的页面的input绑定事件。

var mockContent=null
var inputs=document.getElementsByTagName('input')
for(var i=0; i< inputs.length; i++){
 inputs[i].addEventListener('contextmenu',function(){
 mockContent=this
 })
}

当点击回调事件回来之后，就知道具体右击的是什么元素，就可以直接将对应元素还值就是了。

输入事件

前面元素绑定，加值之后，就是直接mockContent.value=值就是了。但是我们后台用的是vue写的，直接操作dom上的value值，不能引起对应的双向绑定生效，页面元素校验审核也不通过。这时候就需要手动触发下对应的input事件。就变成了下文。随机生成姓名，手机号，身份证不在本文讨论范围内。自行翻阅之前文章内容。

mockContent.value=value
mockContent.dispatchEvent(new Event('input'))

插件存储storage

在配置文件里面声明权限

有时候，其实我们希望录入的内容是固定的，比如手机号码。随机填写别人的也可以，但是你的系统如果同时还给别人发送验证码啊，消息通知之类的就不好了。这时候其实配置一下指定内容既可，这时候就用到的配置页面，一般配置信息都存储在storage。最重要的是，放在此处的内容是全局的。

你直接使用chrome.storage进行操作就行了。插件的存储分为local和sync两种，sync的配置可以跟着你的谷歌帐号同步的。自己也用不到，就先用本地的好了。内容也很简单。

//写入
chrome.storage.local.set({name:'name',age:19},_=>{
})
//读取,格式一样，属性后面的值是默认值。
chrome.storage.local.get({name:'name',age:19},items=>{
 console.log(items.name, items.age)
})

注意，读取和写入都是异步操作。

通知 notifications

保存成功要消息提醒一下，在配置文件里面声明权限，直接用就是了，也很简单。

chrome.notifications.create(null, {
 type: 'basic',
 iconUrl: '../image/icon-48.png',
 title: '保存成功',
 message: '配置已经生效，请继续使用！'
});

当然样式可以很丰富，具体看你自己的需要。

文末

只要用chrome，基本上都会用插件的。开发满足自己需求的插件，提高效率，堪称神器。

文中提到的小插件已经放在了github上，大神看看笑话就得了，单纯自用。

MockInput： https://github.com/q5276/MockInput

另外，还有批量生成模拟信息的页面

模拟个人信息测试用：https://notes.tingno.com/demo/mock/person.html

下面是广告