The whole process of developing a Google plug-in with vue+element

Simple function: Click the plug-in icon in the upper right corner of the browser to pop up a small pop-up window, click settings to pop up the settings page, and replace the background image or color.

start

1. Create a folder testPlugin locally and create a new manifest.json file

{
    "name": "testPlugin",
    "description": "This is a test case",
    "version": "0.0.1",
    "manifest_version": 2
}

2. Add a small icon for the plugin

Create an icons folder under testPlugin, and put some icons of different sizes in it. For testing, you can be lazy and only put icons of one size. Modify manifest.json to:

{
    "name": "testPlugin",
    "description": "This is a test case",
    "version": "0.0.1",
    "manifest_version": 2,
    "icons": {
      "16": "icons/16.png",
      "48": "icons/16.png"
  }
}

At this time, load the unzipped program (the folder we created) in the extension, and you can see the prototype:

3. Selectively add the box that pops up in the upper right corner of the browser by clicking the plug-in icon

"browser_action": {
  "default_title": "test plugin",
  "default_icon": "icons/16.png",
  "default_popup": "index.html"
}

testPlugin creates an index.html file:

<!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="Please enter"/>
</body>
</html>

Refresh the plug-in. At this time, click the icon of the plug-in just added in the browser, and a pop-up will appear:

4.js events (same for styles)

document.getElementById('button').onclick = function() {
    alert(document.getElementById('name').value)
}

In html:

<input id="name" placeholder="Please enter"/>
<input id="button" type="button" value="click"/>
<script src="js/index.js"></script>

Refresh the plug-in. Click the icon of the plug-in you just added in the browser, and the value in the input box will pop up:

A floating box embedded in a web page

The above example is a small pop-up window that appears in the upper right corner of the browser when you click the icon.

Introduce vue.js and element-ui

Download the appropriate versions of vue.js and element-ui plug-ins, and introduce them in the same way as index.js. If you don’t have the address to download a separate js file, you can open the CDN address and copy the compressed code directly.

Add in 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"
    }
  ],

In the index.js file:

Here we use the method of inserting a link in the head to introduce the css of element-ui to reduce the size of the plug-in package. Of course, you can also introduce it in manifest.json like introducing index.js.

Write the Vue instance directly in the index.js file, but first create a node to mount the instance:

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
        }
    }
})

Let's write a simple tool to replace the background color of a web page

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">Color<el-button type="text" icon="el-icon-close" @click="close"></el-button></div>
            <div class="app-plugin-content">Background: <el-color-picker v-model="color1"></el-color-picker></div>
            <div class="app-plugin-content">Font: <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 = bodies.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="Open" />
  </div>
</body>
<script src="js/icon.js"></script>

</html>

Create 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)
      });
  })
}

This small attempt is now complete. Of course, if there are more requirements, we can collaborate with local storage or the server.

Summarize

This is the end of this article about developing a Google plug-in with vue+element. For more relevant vue+element plug-in development content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Example code of vue using Moment plugin to format time
Example of using swiper plugin to implement carousel in Vue
How to introduce Excel table plug-in into Vue
How to build a drag and drop plugin using vue custom directives
Vue code highlighting plug-in comprehensive comparison and evaluation
Based on vue-simple-uploader, encapsulate the global upload plug-in function of file segment upload, instant upload and breakpoint resume
How to use vue-bootstrap-datetimepicker date plugin in vue-cli 3
Vue plugin error: Vue.js is detected on this page. Problem solved

<<: Install CentOS system based on WindowsX Hyper-V

>>: Detailed installation process of MySQL 8.0 Windows zip package version