Chrome plug-in development case sharing, through the chrome plug-in to add auxiliary functions to our system page, that is to send some required data and some browser local storage functions.
Warehouse address
Main settings of manifest.json in Chrome plug-in
{
"permissions": [
"http://localhost:3000/*",
"tabs",
"storage"
],
"content_scripts": [{
"matches": ["http://localhost:3000/*"],
"js": ["js/hacker.js"]
}]
}
Layout of Chrome plug-in interface
<body>
<form id="form">
<input id="db" type="text" placeholder="please input your db name"><br>
<input id="category" type="text" placeholder="please input your category name"><br>
<input id="user" type="text" placeholder="please input your user name"><br>
<button type="submit" id="btn">Send</button>
</form>
</body>
<script src="js/index.js"></script>Main logic of Chrome plug-in
index.js code:
chrome.tabs.query({active: true, lastFocusedWindow: true}, function (tabs) {
var btn = document.querySelector('#btn');
var db = document.querySelector('#db');
var category = document.querySelector('#category');
var user = document.querySelector('#user');
// get browser local storage
chrome.tabs.sendMessage(tabs[0].id, {action:'getStorage'}, function(resp){
if(!resp) {
return;
}
db.value = resp.db;
category.value = resp.category;
user.value = resp.user;
});
// send button click event handler
btn.onclick = function () {
var messageData = {
action: 'clickSend',
list: {
db: db.value,
category: category.value,
user: user.value
}
};
chrome.tabs.sendMessage(tabs[0].id, messageData); // chrome send message here
}
});
Insert the script under the currently allowed domain name into the Chrome plug-in
hacker.js code
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.action === "clickSend") {
var postData = getInputsGui(document, request.list); // get data
handlePostAjax(postData, request.list, 'http://127.0.0.1:3000/');
}
if (request.action === "getStorage") {
var chromePluginStore = localStorage.chromePlugin;
sendResponse(chromePluginStore ? JSON.parse(chromePluginStore) : null);
}
});
// get guis from chosen inputs
function getInputsGui(d, messageData) {
var inputs = d.querySelectorAll('input[type="checkbox"]');
var inputsArray = []; // input array list
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
inputsArray.push(inputs[i].getAttribute('gui'));
}
}
var postData = [];
for (var i = 0; i < inputsArray.length; i++) {
var item = {};
item.Gui = inputsArray[i] || 'test';
item.Db = messageData.db || 'test';
item.Category = messageData.category || 'test';
item.User = messageData.user || 'test';
postData.push(item);
}
return postData;
}
// handle post method
function handlePostAjax(postData, list, url) {
var xhr = new XMLHttpRequest();
xhr.open('post', url); // send an request
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // set request header
xhr.send(JSON.stringify(postData)); // send to server
xhr.onreadystatechange = function() {
if ((xhr.readyState === 4) && (xhr.status === 200)) {
localStorage.chromePlugin = JSON.stringify(list); // for local storage
alert('send success!');
} else if ((xhr.readyState === 4) && (xhr.status !== 200)) {
alert('fail');
}
}
}
The above script will be inserted under the test domain name page to respond to the click event in the chrome plug-in
The processing of data sent by the server in response to chrome
Main procedures:
'use strict';
const http = require('http');
const fs = require('fs');
const server = http.createServer((req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
let url = req.url;
let method = req.method;
if(url === '/' && method === 'GET') {
fs.createReadStream(__dirname + '/index.html', 'utf8').pipe(res);
}else if (url === '/' && method === 'POST') {
parsePostData(req, (data) => {
console.log(data); // log request data
res.end('post received');
});
};
});
server.listen(3000, '127.0.0.1', function() {
console.log('server is listening @ port 3000');
});
function parsePostData(req, callback) {
let data = '';
req.on('data', (chunk) => {
data += chunk;
});
req.on('end', () => {
callback(data);
})
}Main code of index.html page to be rendered by the server:
<ul>
<li><input type="checkbox" gui="gui1">gui1</li>
<li><input type="checkbox" gui="gui2">gui2</li>
<li><input type="checkbox" gui="gui3">gui3</li>
<li><input type="checkbox" gui="gui4">gui4</li>
<li><input type="checkbox" gui="gui5">gui5</li>
</ul>test
Under the test domain name: http://127.0.0.1:3000/, you can send the page data you want to get through the chrome plug-in.