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

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

Recommend

Solve the scroll-view line break problem of WeChat applet

Today, when I was writing a small program, I used...

jQuery realizes the effect of theater seat selection and reservation

jQuery realizes the effect of theater seat select...

Detailed explanation of the usage of MySQL memory tables and temporary tables

Usage of MySQL memory tables and temporary tables...

Detailed explanation of the principles of Vue's responsive system

Table of contents The basic principles of Vue'...

Implementation of Mysql User Rights Management

1. Introduction to MySQL permissions There are 4 ...

What are the benefits of using // instead of http:// (adaptive https)

//Default protocol /The use of the default protoc...

How to write asynchronous tasks in modern JavaScript

Preface In this article, we'll explore the ev...

Detailed explanation of asynchronous programming knowledge points in nodejs

Introduction Because JavaScript is single-threade...

Introduction to the graphic composition and typesetting capabilities of web design

Everything needs a foundation. To build a house, ...

Multiple solutions for cross-domain reasons in web development

Table of contents Cross-domain reasons JSONP Ngin...

Do designers need to learn to code?

Often, after a web design is completed, the desig...

Negative margin function introduction and usage summary

As early as in the CSS2 recommendations in 1998, t...

Steps to install MySQL 5.7 in binary mode and optimize the system under Linux

This article mainly introduces the installation/st...

How to use DQL commands to query data in MySQL

In this article, the blogger will take you to lea...

Autotrash tool for Linux to automatically delete old junk files at a scheduled time

Autotrash is a command line program that automate...