vue+element開發一個谷歌外掛的全過程
阿新 • • 發佈：2021-05-12
簡單功能：點選瀏覽器右上角外掛icon彈出小彈窗，點選設定彈出設定頁，並替換背景圖或顏色。
開始
1.本地建立資料夾testPlugin並新建manifest.json檔案
{
"name": "testPlugin","description": "這是一個測試用例","version": "0.0.1","manife程式設計客棧st_version": 2
}
2.新增外掛的小icon
testPlugin下建立icons資料夾，可以放入一些不同尺寸的icon，測試可以偷懶都放一種尺寸的icon。修改manifest.json為：
{
"name": "testPlugin","manifest_version": 2,"icons": {
"16": "icons/16.png","48": "icons/16.png"
}
}
這時候在擴充套件程式中載入已解壓的程式(就是我們建立的資料夾)，就可以看到雛形了：
3.選擇性地新增點選外掛icon瀏覽器右上角彈出來的框
"browser_action": {
"default_title": "test plugin","default_icon": "icons/16.png","default_popup": "index.html"
}
testPlugin建立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 id="name" placeholder="請輸入"/> </body> </html>
重新整理外掛，這時候點選瀏覽器中剛剛新增的外掛的icon，就會彈出：
4.js事件（樣式同理）
document.getElementById('button').onclick = function() {
alert(document.getElementById('name').value)
}
html中：
<input id="name" placeholder="請輸入"/> <input id="button" type="button" value="點選"/> <script src="js/index.js"></script>
重新整理外掛，這時候點選瀏覽器中剛剛新增的外掛的icon，就會彈出輸入框中的值：
一個嵌入網頁中的懸浮框
上述例子是點選icon瀏覽器右上角出現的小彈窗，
引入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例項，不過首先得建立掛載例項的節點：
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
}
}
})
讓我們來寫一個簡易替換網頁背景顏色工具
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" class="oc-move-page" id="oc_content_page">
<div class="oc-content-title" 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>
<www.cppcns.comdiv class="app-plugin-content">字型：<el-colowww.cppcns.comr-picker v-model="color2"></el-color-picker></div>
</div>
`,data: function () {
return { color1: null,color2: null,documentArr: [],textArr: [],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}!imporhttp://www.cppcns.comtant;`
}
})
},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 nhttp://www.cppcns.comame="viewport" content="width=device-width,initial-scale=1.0">
<title>my plugin</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="plugin">
<input id="plugin_button" type="button" value="開啟" />
</div>
</body>
<script src="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)
});
})
}
這樣一個小嚐試就完成了，當然如果有更多需求可以結合本地儲存或者服務端來協作。
總結
到此這篇關於vue+element開發一個谷歌外掛的文章就介紹到這了,更多相關vue+element開發外掛內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！