How to Build a Simple QR Code Generator Chrome Extension
This article explains why writing a custom Chrome extension is beneficial and provides step‑by‑step instructions, including directory structure, manifest, background script, popup UI, testing, and publishing, to create a QR code generator that works directly from the browser.
1. Why Write a Browser Extension
Writing your own extension gives you full control over functionality, solves specific problems that existing extensions cannot, improves security by avoiding third‑party code, and can save money on paid features.
1.1 Personalization
Custom extensions can be tailored exactly to your workflow and requirements.
1.2 Solving Specific Issues
When a unique feature is needed, a self‑written extension can implement it quickly and efficiently.
1.3 Enhanced Security
Developing the code yourself eliminates hidden privacy risks or malicious behavior from external plugins.
1.4 Cost Savings
Even though many extensions are free, premium features often require payment; a homemade extension provides those capabilities at no extra cost.
2. How to Write a Browser Extension
2.1 Understand the Extension Directory Structure
A typical Chrome extension contains the following files:
my-qrcode-plugin/
│
├── manifest.json // configuration, permissions, and basic info
├── background.js // background logic, e.g., creating context menu
├── popup.html // UI displayed when the extension icon is clicked
├── popup.js // script for the popup UI
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png2.2 Create manifest.json
{
"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"
}
}2.3 Write background.js
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'; // ensure on top
iframe.src = apiUrl;
document.body.appendChild(iframe);
setTimeout(() => {
iframe.remove();
}, 5000);
}2.4 Create popup.html
<!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>
<style>
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
#qrcode iframe {
width: 500px;
height: 500px;
border: none;
}
</style>
</head>
<body>
<div id="qrcode">
<iframe id="qrFrame" src=""></iframe>
</div>
<script src="popup.js"></script>
</body>
</html>2.5 Write popup.js
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;
});
});2.6 Test the Extension
2.6.1 Load Unpacked Extension
Open chrome://extensions/, enable Developer Mode, click “Load unpacked”, and select the my-qrcode-plugin folder.
2.6.2 Verify Functionality
Right‑click any page, choose “Generate QR Code”, and a QR code overlay appears for 5 seconds. Alternatively, click the extension icon to display a persistent QR code.
2.6.3 Live Editing and Reload
After modifying code in the DevTools, save changes and click the “Reload” button on the extensions page to see updates instantly.
3. Publish to Chrome Web Store
Steps: create a developer account at the Chrome Web Store dashboard, pack the extension, upload the ZIP file, fill in details (name, description, screenshots), pay the one‑time $5 registration fee, and submit for review.
4. Conclusion
By building this simple QR‑code generator extension, you learn the core concepts of Chrome extensions—manifest configuration, background scripts, UI popup, and testing—providing a solid foundation for creating more advanced browser plugins.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
JD Tech Talk
Official JD Tech public account delivering best practices and technology innovation.
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.