How to Build a Safari QR‑Code Extension from Scratch
This step‑by‑step guide shows how to create a Safari web extension that generates a QR code for the current page, covering project setup in Xcode, manifest configuration, UI design, JavaScript communication, and optional offline QR generation.
Overview
Safari web extensions are less mature than Chrome. This guide shows how to build a Safari Extension App that generates a QR code for the active page URL.
Project creation
In Xcode create a new Safari Extension App using the Multiplatform template (iPhone + macOS). Xcode generates the required targets and folder layout.
Folder layout
Shared (App): Main.html, Icon.png, Style.css, Script.js, ViewController.swift
Shared (Extension): _locales, images, manifest.json, background.js, content.js, popup.html, popup.css, popup.js
manifest.json
{
"content_scripts": [{
"js": ["content.js"],
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
"run_at": "document_idle"
}],
"host_permissions": ["http://*/*", "https://*/*"],
"permissions": ["activeTab", "tabs", "scripting", "messaging"]
}This grants the extension access to all pages and allows querying the active tab and messaging.
Popup UI
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="popup.css">
<script type="module" src="popup.js"></script>
</head>
<body>
<div id="loader"></div>
<div id="img_back">
<img id="qrcode" src=" " alt="QR Code"/>
</div>
</body>
</html>body { width: 360px; height: 360px; text-align: center; margin: 0; background-color: white; }
#loader { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite; transform: translate(-50%, -50%); }
#img_back { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; transform: translate(-50%, -50%); }
#qrcode { width: 100%; border-radius: 9px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }JavaScript logic
popup.js queries the active tab, sends a message to content.js to obtain the current URL, builds a QR‑code request URL, and sets the src of the image. The loading spinner is hidden once the image loads.
const kQRAPI = "https://qrcode.tec-it.com/API/QRCode?data=";
function generateQRCode(methodName, message) {
browser.tabs.query({active: true, currentWindow: true}, function(tabs) {
const activeTab = tabs[0];
browser.tabs.sendMessage(activeTab.id, {title: methodName, message: message}, function(res) {
if (res.title == "targetURL") {
const encoded = encodeURIComponent(res.urlStr);
const img = document.getElementById("qrcode");
img.onload = () => document.getElementById("loader").style.display = "none";
img.src = kQRAPI + encoded + "&istransparent=true";
}
});
});
}
generateQRCode("getPageURL", "generate current page URL");content.js runs in the page context and returns the page URL when requested.
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.title == "getPageURL") {
sendResponse({title: "targetURL", urlStr: window.location.href});
}
});Running the extension
Build and run the macOS target. The extension appears in Safari’s toolbar; clicking the icon opens the popup and immediately shows the QR code for the active page.
Offline QR generation (optional)
Replace the external API with a pure‑JavaScript QR‑code library (e.g., qrcode.js) to generate the image locally, eliminating network latency.
References
Apple Safari Web Extensions documentation
Chrome Web Extensions guide
MDN compatibility tables for manifest.json GitHub – QR‑Code extension example
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.
Sohu Tech Products
A knowledge-sharing platform for Sohu's technology products. As a leading Chinese internet brand with media, video, search, and gaming services and over 700 million users, Sohu continuously drives tech innovation and practice. We’ll share practical insights and tech news here.
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.