Build a Chrome QR Code Generator Extension from Scratch
Learn how to create a custom Chrome extension that generates QR codes for any webpage, covering plugin architecture, manifest configuration, background and popup scripts, testing, and publishing steps, while highlighting benefits like personalization, security, and cost savings for developers.
Inspired by a price‑protection plugin, the author explores writing a custom browser extension.
Why Write Your Own Browser Extension
Benefits include personalization, solving specific problems, enhanced security, and cost savings.
How to Write a Browser Extension
2.1 Understand Extension Directory Structure
<code>my-qrcode-plugin/
├── manifest.json
├── background.js
├── popup.html
├── popup.js
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
</code>2.2 Create manifest.json
<code>{
"manifest_version": 3,
"name": "QR Code Generator",
"version": "1.0",
"permissions": ["contextMenus", "activeTab", "scripting"],
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
}
}
</code>2.3 Write background.js
<code>chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "generateQRCode",
title: "Generate QR Code",
contexts: ["page"]
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "generateQRCode") {
const url = tab.url;
const apiUrl = `https://api.cl2wm.cn/api/qrcode/code?text=${url}&mhid=sELPDFnok80gPHovKdI`;
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: showQRCode,
args: [apiUrl]
});
}
});
function showQRCode(apiUrl) {
const iframe = document.createElement('iframe');
iframe.style.position = 'fixed';
iframe.style.top = '50%';
iframe.style.left = '50%';
iframe.style.transform = 'translate(-50%, -50%)';
iframe.style.width = '500px';
iframe.style.height = '500px';
iframe.style.border = 'none';
iframe.style.zIndex = '1000';
iframe.src = apiUrl;
document.body.appendChild(iframe);
setTimeout(() => { iframe.remove(); }, 5000);
}
</code>2.4 Create popup.html
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
</head>
<body>
<div id="qrcode">
<iframe id="qrFrame" src=""></iframe>
</div>
<script src="popup.js"></script>
</body>
</html>
</code>2.5 Write popup.js
<code>document.addEventListener('DOMContentLoaded', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
if (tabs.length === 0) { console.error('No active tab found'); return; }
const url = tabs[0].url;
const apiUrl = `https://api.cl2wm.cn/api/qrcode/code?text=${url}&mhid=sELPDFnok80gPHovKdI`;
const iframe = document.getElementById('qrFrame');
iframe.src = apiUrl;
});
});
</code>2.6 Test the Extension
2.6.1 Load Unpacked Extension
Open Chrome, navigate to
chrome://extensions/, enable Developer mode, click “Load unpacked”, and select the plugin folder.
2.6.2 Verify Functionality
Right‑click any page, choose “Generate QR Code”, and a QR‑code iframe appears for five seconds. Alternatively, click the extension icon to display a persistent QR code.
After modifying code, reload the extension from the extensions page to see changes.
Publish to Chrome Web Store
Steps: create a developer account, pack the extension, upload the zip file, fill in metadata, pay the $5 registration fee, and submit for review.
Conclusion
Building a simple QR‑code generator extension demonstrates how to structure, code, test, and publish a Chrome plugin, offering personalization, security, and cost benefits for developers.
JD Cloud Developers
JD Cloud Developers (Developer of JD Technology) is a JD Technology Group platform offering technical sharing and communication for AI, cloud computing, IoT and related developers. It publishes JD product technical information, industry content, and tech event news. Embrace technology and partner with developers to envision the future.
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.