脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue+element开发插件

vue+element开发一个谷歌插件的全过程

 更新时间：2021年05月11日 10:35:37   作者：hello，是翠花呀  
这篇文章主要给大家介绍了关于vue+element开发一个谷歌插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

简单功能：点击浏览器右上角插件icon弹出小弹窗，点击设置弹出设置页，并替换背景图或颜色。

开始

1.本地创建文件夹testPlugin并新建manifest.json文件

{
    "name": "testPlugin",
    "description": "这是一个测试用例",
    "version": "0.0.1",
    "manifest_version": 2
}

2.添加插件的小icon

testPlugin下创建icons文件夹，可以放入一些不同尺寸的icon，测试可以偷懒都放一种尺寸的icon。修改manifest.json为：

{
    "name": "testPlugin",
    "description": "这是一个测试用例",
    "version": "0.0.1",
    "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>
            <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)
      });
  })
}

这样一个小尝试就完成了，当然如果有更多需求可以结合本地存储或者服务端来协作。

总结

到此这篇关于vue+element开发一个谷歌插件的文章就介绍到这了,更多相关vue+element开发插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue el-checkbox实现全选单选方式

    vue el-checkbox实现全选单选方式

    这篇文章主要介绍了vue el-checkbox实现全选单选方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue中用watch一次监听多个值变化的示例详解

    Vue中用watch一次监听多个值变化的示例详解

    在Vue中,watch 本身不能监听多个变量,但我们可以通过返回具有计算属性的对象然后监听该对象,从而实现一次性“监听多个变量”,本文给大家介绍了Vue中用watch一次监听两个值变化的示例,需要的朋友可以参考下
    2024-01-01
  • vue实现数字滚动效果

    vue实现数字滚动效果

    这篇文章主要为大家详细介绍了vue实现数字滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue3.0+element Plus实现页面布局侧边栏菜单路由跳转功能

    vue3.0+element Plus实现页面布局侧边栏菜单路由跳转功能

    这篇文章主要介绍了vue3.0+element Plus实现页面布局，侧边栏菜单路由跳转,需要的朋友可以参考下
    2023-07-07
  • 解决vue项目刷新后,导航菜单高亮显示的位置不对问题

    解决vue项目刷新后,导航菜单高亮显示的位置不对问题

    今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue项目中按钮防抖处理实现过程

    vue项目中按钮防抖处理实现过程

    这篇文章主要给大家介绍了关于vue项目中按钮防抖处理实现的相关资料,在项目开发中相必大家时常会遇到按钮重复点击后引起事件重复提交的问题,需要的朋友可以参考下
    2023-08-08
  • vue或react项目生产环境去掉console.log的操作

    vue或react项目生产环境去掉console.log的操作

    这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue中v-cloak的作用和原理解析

    vue中v-cloak的作用和原理解析

    v-cloak原理是先通过样式隐藏内容,然后在内存中进行值的替换,将替换的内容再反馈给界面,数据渲染完场之后,v-cloak 属性会被自动去除,本文详细介绍vue中v-cloak的作用和原理解析,感兴趣的朋友一起看看吧
    2023-09-09
  • Vue项目使用Websocket大文件FileReader()切片上传实例

    Vue项目使用Websocket大文件FileReader()切片上传实例

    这篇文章主要介绍了Vue项目使用Websocket大文件FileReader()切片上传实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 详解vue填坑之解决部分浏览器不支持pushState方法

    详解vue填坑之解决部分浏览器不支持pushState方法

    这篇文章主要介绍了详解vue填坑之解决部分浏览器不支持pushState方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论