言

為了前端體驗更加友好，減緩用戶的焦慮情緒，提升項目質量等，我們在項目里面可以使用骨架屏，提前渲染出來一個跟正式頁面相似的頁面出來，減小首屏加載時間。

在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

下面是廣告