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. start1. 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 pageThe 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 pageindex.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. SummarizeThis 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:
|
<<: Install CentOS system based on WindowsX Hyper-V
>>: Detailed installation process of MySQL 8.0 Windows zip package version
Recommend
isPrototypeOf Function in JavaScript
Table of contents 1. isPrototypeOf() Example 1, O...
mysql having usage analysis
Usage of having The having clause allows us to fi...
How to collect Nginx logs using Filebeat
Nginx logs can be used to analyze user address lo...
Summary of several submission methods of HTML forms
The most common, most commonly used and most gener...
Docker container monitoring and log management implementation process analysis
When the scale of Docker deployment becomes large...
100-1% of the content on the website is navigation
Website, (100-1)% of the content is navigation 1....
How to encapsulate timer components in Vue3
background When you open the product details on s...
Mysql date formatting and complex date range query
Table of contents Preface Query usage scenario ca...
Example of horizontal and vertical centering of div sub-element using CSS
Div basic layout <div class="main"&g...
Detailed explanation of incompatible changes of components in vue3
Table of contents Functional Components How to wr...
VMware vSphere6.0 server virtualization deployment and installation diagram (detailed steps)
1. Key points for early planning of VMware vSpher...
Introduction to the use of base link tag base
<br />When you click the link, the web page ...
How to configure Nginx domain name rewriting and wildcard domain name resolution
This article introduces how to configure Nginx to...
Analysis of MySQL lock wait and deadlock problems
Table of contents Preface: 1. Understand lock wai...
Json string + Cookie + localstorage in JS
Table of contents 1.Json string 1.1Json Syntax 1....