How to Build a Simple QR Code Generator Chrome Extension

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.png 2.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 QR Code Generator 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.