Building a Chrome Extension for QR Code Generation and Decoding with jQuery
This tutorial explains how to create a Chrome browser extension that generates QR codes (optionally with protocol headers) and decodes them, covering the background motivation, directory layout, manifest and popup design, core JavaScript logic, installation steps, and a download link for the complete source.
The author needed a quick way to switch among different H5 protocol platforms (such as 58, Anjuke, and a local version) while debugging, automatically add protocol headers, strip unused parameters, and generate QR‑code URLs without manual copy‑pasting; this motivated the development of a small Chrome extension.
The extension offers two simple features: (1) generate a QR code that can include a protocol header, and (2) decode a QR code, with sensitive protocol information masked for security.
The project follows a familiar jQuery‑driven structure; the directory layout contains css , js , and image assets, and the author notes that the era of jQuery‑dom manipulation is still handy for lightweight UI work.
The manifest.json file is described as the core configuration of the extension, specifying name, version, icons, permissions, and matching URLs, with a link to the official Chrome manifest documentation for details.
The popup UI is illustrated with a screenshot and consists of two tabs—"Generate QR Code" and "Decode QR Code"—implemented with ordinary HTML elements that can be edited like any web page.
The main HTML skeleton of the popup is shown below:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jsQR.min.js"></script>
<script src="js/qrcode.min.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/init.js"></script>
</head>
<body id="qr-body">
... (rest of the DOM) ...
</body>
</html>Key implementation notes include: all JavaScript must be loaded as external files (no inline scripts), DOM operations are scoped to the popup page, and the current tab URL cannot be obtained directly from location.href because it returns the extension's own URL.
The core JavaScript logic (shown in the following snippets) handles mode and scheme selection, builds the QR‑code string, creates the QR code with QRCode , decodes uploaded images using jsQR , copies results via ClipboardJS , and retrieves the active tab URL using the Chrome tabs API:
$(function () {
let qrcode, url, mode = $(".mode").val(), scheme = $(".scheme").val();
const getQRStr = function () {
if (mode == 2) return url;
var params = encodeURIComponent(`{"url":"${url}"}`);
return `${scheme}://xxxx/xxxx/xxxx?params=${params}`;
};
const remakeStr = function () {
qrcode.makeCode(getQRStr());
$(".download").attr("href", $("#qrcode img").attr("src"));
};
const decodeQR = function (file) {
return new Promise((resolve, reject) => {
const url = URL.createObjectURL(file), img = new Image();
img.onload = function () {
URL.revokeObjectURL(this.src);
var cvs = document.createElement('canvas');
var ctx = cvs.getContext('2d');
cvs.width = this.width; cvs.height = this.height;
ctx.drawImage(this, 0, 0);
const imageData = ctx.getImageData(0, 0, cvs.width, cvs.height);
const result = jsQR(imageData.data, imageData.width, imageData.height);
resolve({ status: !!result, codeStr: result ? result.data : "" });
};
img.src = url;
});
};
const clipboard = new ClipboardJS('.copy', { text: () => $(".decode-str").text() || null });
// Chrome tabs API to get current page URL
chrome.tabs.query({ active: true, lastFocusedWindow: true, currentWindow: true }, function (tabs) {
url = new URL(tabs[0].url).toString();
$("#code-url").val(url);
qrcode = new QRCode("qrcode", { text: getQRStr(), width: 196, height: 196, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.M });
setTimeout(() => $(".download").attr("href", $("#qrcode img").attr("src")), 1500);
});
// UI event handlers omitted for brevity
});Installation instructions advise loading the unpacked extension via Chrome's developer mode, caution against moving the extension folder after loading, and explain that publishing to the Chrome Web Store requires a $6 registration fee and a packaged .crx file.
The article concludes with a friendly reminder that extensions can do far more (background scripts, context menus, notifications, options pages, etc.) and provides a direct download link to the complete source zip.
Link: https://wos.58cdn.com.cn/IjGfEdCbIlr/ishare/d35a35d3XdWbV9Wc5a37XU35d1d359Wc.zip
58 Tech
Official tech channel of 58, a platform for tech innovation, sharing, and communication.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.