Chrome 擴展開發實戰：網址轉二維碼插件 (Browser Action + QRCode.js)

需求背景

微信內置瀏覽器無法直接輸入網址，需掃碼打開。見到有趣網頁想分享時，需先去轉碼網站生成二維碼再掃，流程繁瑣。開發一鍵生成當前頁面二維碼的 Chrome 插件。

技術棧

• Manifest V2
• Browser Action (點擊圖標彈出 popup)
• jquery.qrcode.min.js 生成 Canvas 二維碼
• chrome.tabs API 獲取當前標籤頁 URL

核心文件

manifest.json

{
  "name": "WebSite2QRcode",
  "version": "1.0",
  "description": "將網址轉化成二維碼",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "QRcode",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "https://*/*", "https://*/*", "notifications"],
  "manifest_version": 2
}

popup.html

popup.js

function getCurrentTabUrl(callback) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    callback(tabs[0].url, tabs[0].title);
  });
}

document.addEventListener('DOMContentLoaded', function() {
  getCurrentTabUrl(function(url, title) {
    $('#website').text('網址: ' + url);
    $('#title').text('標題: ' + title);
    $('#QRcode').qrcode({width: 128, height: 128, text: url});
  });
});

效果展示

點擊圖標即顯示當前頁面標題、網址及二維碼，手機掃碼即可在微信打開。

源碼地址

GitHub: iloster/WebSite2QRcode

避坑指南

• Manifest V2 中 chrome.tabs.getSelected 已棄用，改用 chrome.tabs.query
• Popup 載入時需等待 DOMContentLoaded 再執行 JS
• 權限 "tabs" 僅用於獲取 URL/標題，無需宿主權限
• 二維碼庫選用輕量級 jquery.qrcode，無需後端服務