vue+element開發(fā)一個谷歌插件的全過程
簡單功能：點擊瀏覽器右上角插件icon彈出小彈窗，點擊設置彈出設置頁，并替換背景圖或顏色。
開始1.本地創(chuàng)建文件夾testPlugin并新建manifest.json文件
{ 'name': 'testPlugin', 'description': '這是一個測試用例', 'version': '0.0.1', 'manifest_version': 2}
2.添加插件的小icon
testPlugin下創(chuàng)建icons文件夾，可以放入一些不同尺寸的icon，測試可以偷懶都放一種尺寸的icon。修改manifest.json為：
{ 'name': 'testPlugin', 'description': '這是一個測試用例', 'version': '0.0.1', 'manifest_version': 2, 'icons': { '16': 'icons/16.png', '48': 'icons/16.png' }}
這時候在擴展程序中加載已解壓的程序(就是我們創(chuàng)建的文件夾)，就可以看到雛形了：
3.選擇性地添加點擊插件icon瀏覽器右上角彈出來的框
'browser_action': { 'default_title': 'test plugin', 'default_icon': 'icons/16.png', 'default_popup': 'index.html'}
testPlugin創(chuàng)建index.html文件：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>test plugin</title></head><body> <input placeholder='請輸入'/></body></html>
刷新插件，這時候點擊瀏覽器中剛剛添加的插件的icon，就會彈出：
4.js事件（樣式同理）
document.getElementById(’button’).onclick = function() { alert(document.getElementById(’name’).value)}
html中：
<input placeholder='請輸入'/><input type='button' value='點擊'/><script src='http://www.b3g6.com/bcjs/js/index.js'></script>
刷新插件，這時候點擊瀏覽器中剛剛添加的插件的icon，就會彈出輸入框中的值：
上述例子是點擊icon瀏覽器右上角出現(xiàn)的小彈窗，
引入vue.js、element-ui
下載合適版本的vue.js和element-ui等插件，同樣按照index.js一樣的操作引入，如果沒有下載單獨js文件的地址，可以打開cdn地址直接將壓縮后的代碼復制。
manifest.json中添加：
'content_scripts': [ { 'matches': ['<all_urls>' ], 'css': ['css/index.css' ], 'js': ['js/vue.js','js/element.js','js/index.js' ], 'run_at': 'document_idle' } ],
在index.js文件：
這里使用在head里插入link 的方式引入element-ui的css，減少插件包的一點大小，當然也可以像引入index.js那樣在manifest.json中引入。
直接在index.js文件中寫Vue實例，不過首先得創(chuàng)建掛載實例的節(jié)點：
let element = document.createElement(’div’)let attr = document.createAttribute(’id’)attr.value = ’appPlugin’element.setAttributeNode(attr)document.getElementsByTagName(’body’)[0].appendChild(element)let link = document.createElement(’link’)let linkAttr = document.createAttribute(’rel’)linkAttr.value = ’stylesheet’let linkHref = document.createAttribute(’href’)linkHref.value = ’https://unpkg.com/element-ui/lib/theme-chalk/index.css’link.setAttributeNode(linkAttr)link.setAttributeNode(linkHref)document.getElementsByTagName(’head’)[0].appendChild(link)const vue = new Vue({ el: ’#appPlugin’, template:` <div class='app-plugin-content'>{{text}}{{icon_post_message}}<el-button @click='Button'>Button</el-button></div> `, data: function () {return { text: ’hhhhhh’, icon_post_message: ’_icon_post_message’, isOcContentPopShow: true } }, mounted() {console.log(this.text) }, methods: {Button() { this.isOcContentPopShow = false} }})讓我們來寫一個簡易替換網(wǎng)頁背景顏色工具
index.js：
let element = document.createElement(’div’)let attr = document.createAttribute(’id’)attr.value = ’appPlugin’element.setAttributeNode(attr)document.getElementsByTagName(’body’)[0].appendChild(element)let link = document.createElement(’link’)let linkAttr = document.createAttribute(’rel’)linkAttr.value = ’stylesheet’let linkHref = document.createAttribute(’href’)linkHref.value = ’https://unpkg.com/element-ui/lib/theme-chalk/index.css’link.setAttributeNode(linkAttr)link.setAttributeNode(linkHref)document.getElementsByTagName(’head’)[0].appendChild(link)const vue = new Vue({ el: ’#appPlugin’, template: `<div v-if='isOcContentPopShow' id='oc_content_page'> <div id='oc_content_title'>顏色 <el-button type='text' icon='el-icon-close' @click='close'></el-button></div> <div class='app-plugin-content'>背景：<el-color-picker v-model='color1'></el-color-picker></div> <div class='app-plugin-content'>字體：<el-color-picker v-model='color2'></el-color-picker></div></div> `, data: function () {return { color1: null, color2: null, documentArr: [], textArr: [], isOcContentPopShow: true } }, watch: {color1(val) { let out = document.getElementById(’oc_content_page’) let outC = document.getElementsByClassName(’el-color-picker__panel’) this.documentArr.forEach(item => { if(!out.contains(item) && !outC[0].contains(item) && !outC[1].contains(item)) {item.style.cssText = `background-color: ${val}!important;color: ${this.color2}!important;` } })},color2(val) { let out = document.getElementById(’oc_content_page’) let outC = document.getElementsByClassName(’el-color-picker__panel’)[1] this.textArr.forEach(item => {if(!out.contains(item) && !outC.contains(item)) {item.style.cssText = `color: ${val}!important;` } })} }, mounted() {chrome.runtime.onConnect.addListener((res) => { if (res.name === ’testPlugin’) {res.onMessage.addListener(mess => { this.isOcContentPopShow = mess.isShow}) }})this.$nextTick(() => { let bodys = [...document.getElementsByTagName(’body’)] let headers = [...document.getElementsByTagName(’header’)] let divs = [...document.getElementsByTagName(’div’)] let lis = [...document.getElementsByTagName(’li’)] let articles = [...document.getElementsByTagName(’article’)] let asides = [...document.getElementsByTagName(’aside’)] let footers = [...document.getElementsByTagName(’footer’)] let navs = [...document.getElementsByTagName(’nav’)] this.documentArr = bodys.concat(headers, divs, lis, articles, asides, footers, navs) let as = [...document.getElementsByTagName(’a’)] let ps = [...document.getElementsByTagName(’p’)] this.textArr = as.concat(ps)}) }, methods: {close() { this.isOcContentPopShow = false} }})
index.html:
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>my plugin</title> <link rel='stylesheet' href='http://www.b3g6.com/bcjs/css/index.css'></head><body> <div class='plugin'> <input type='button' value='打開' /> </div></body><script src='http://www.b3g6.com/bcjs/js/icon.js'></script></html>
新建icon.js：
plugin_button.onclick = function () { mess()}async function mess () { const tabId = await getCurrentTabId() const connect = chrome.tabs.connect(tabId, {name: ’testPlugin’}); connect.postMessage({isShow: true})}function getCurrentTabId() { return new Promise((resolve, reject) => { chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { resolve(tabs.length ? tabs[0].id : null) }); })}
這樣一個小嘗試就完成了，當然如果有更多需求可以結(jié)合本地存儲或者服務端來協(xié)作。
總結(jié)到此這篇關(guān)于vue+element開發(fā)一個谷歌插件的文章就介紹到這了,更多相關(guān)vue+element開發(fā)插件內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
網(wǎng)公網(wǎng)安備