溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue+element如何開發(fā)一個谷歌插件

發(fā)布時間：2021-05-11 15:11:18 來源：億速云 閱讀：171 作者：小新 欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)vue+element如何開發(fā)一個谷歌插件的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

簡單功能：點擊瀏覽器右上角插件icon彈出小彈窗，點擊設(shè)置彈出設(shè)置頁，并替換背景圖或顏色。

開始

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)建的文件夾)，就可以看到雛形了：

vue+element如何開發(fā)一個谷歌插件

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 id="name" placeholder="請輸入"/>
</body>
</html>

刷新插件，這時候點擊瀏覽器中剛剛添加的插件的icon，就會彈出：

vue+element如何開發(fā)一個谷歌插件

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，就會彈出輸入框中的值：

vue+element如何開發(fā)一個谷歌插件

一個嵌入網(wǎng)頁中的懸浮框

上述例子是點擊icon瀏覽器右上角出現(xiàn)的小彈窗，

引入vue.js、element-ui

下載合適版本的vue.js和element-ui等插件，同樣按照index.js一樣的操作引入，如果沒有下載單獨js文件的地址，可以打開cdn地址直接將壓縮后的代碼復(fù)制。

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" 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>
            <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="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)
      });
  })
}

這樣一個小嘗試就完成了，當然如果有更多需求可以結(jié)合本地存儲或者服務(wù)端來協(xié)作。

感謝各位的閱讀！關(guān)于“vue+element如何開發(fā)一個谷歌插件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手