在網購的世界裡，價格波動常常讓人感到無奈。《京東價保》插件通過定時監控已購商品價格變化，降價自動申請京東價格保護，幫我省下了不少錢。

作為一個前端開發工程師，這讓我意識到，手寫一個浏覽器插件是一件很有趣且有意義的事。

于是，我決定嘗試自己動手，開發一個簡單的二維碼生成器插件，各位小夥伴也可參考以下步驟實作自己想要的插件。

一、為什麼要手寫浏覽器插件

手寫插件有許多好處，以下是一些詳細的原因：

1.1 個性化定制

手寫插件可以根據個人需求進行定制。市面上的插件功能可能不完全符合你的需求，而自己動手開發插件，可以精确地實作你想要的功能。

1.2. 解決特定問題

有時，你可能需要一個非常特定的功能，而現有的插件無法提供。手寫插件可以幫助你快速解決這些特定問題，提高工作效率。

1.3 增強安全性

使用第三方插件時，安全性是一個重要的考慮因素。自己開發插件，可以確定代碼的安全性，避免潛在的隐私洩露或惡意行為。

1.4 節省成本

雖然許多插件是免費的，但一些進階功能需要付費。通過手寫插件，你可以免費獲得這些功能，同時避免不必要的開支。

總之，手寫插件不僅能帶來技術上的成長，還能在日常生活中提供實際的便利和解決方案。

二、如何手寫浏覽器插件

2.1 認識插件目錄結構

一個 Chrome 插件通常包含以下檔案和目錄：

my-qrcode-plugin/
│
├── manifest.json  // 插件的配置檔案，定義插件的基本資訊、權限和功能。
├── background.js  // 背景腳本，負責處理插件的邏輯，例如建立右鍵菜單。
├── popup.html     // 插件的彈出頁面，使用者點選插件圖示時顯示。
├── popup.js       // 插件的彈出頁面，執行的腳本。
└── icons/         // 存放插件的圖示，建議提供 16x16、48x48 和 128x128 像素的圖示，不同大小的圖示有不同的作用。
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

2.2 編寫 manifest.json

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 編寫 background.js

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'; // 確定在最上層
 iframe.src = apiUrl;

 document.body.appendChild(iframe);

 setTimeout(() => {
   iframe.remove();
 }, 5000);
}

2.4 編寫 popup.html

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 編寫 popup.js

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 驗證插件功能

在浏覽器上測試 Chrome 插件功能，可以通過以下步驟進行：

2.6.1. 加載未打包的擴充

1.打開 Chrome 浏覽器。

2.輸入 `chrome://extensions/` 進入擴充管理頁面。

3.打開右上角的“開發者模式”。

4.點選“加載已解壓的擴充程式”按鈕。

5.選擇你的插件目錄（my-qrcode-plugin）。

2.6.2. 驗證功能

1. 在任意一個網頁中，通過滑鼠右鍵找到菜單 Generate QR Code, 點選該菜單，頁面生成一個二維碼，手機掃描二維碼即是該網頁，5S後二維碼消失視為驗證通過。

右鍵菜單截圖：

二維碼生成效果圖：

2. 在浏覽器右上角選擇該插件《Generate QR Code》，在網頁右上角生成對應的二維碼，二維碼不消失，視為驗證通過。

右上角插件入口截圖：

二維碼效果圖：

2.6.3. 實時修改和重新整理

1.在開發者工具中修改代碼後，可以直接儲存并重新整理插件或頁面以檢視更改效果。

2.通過“重新加載”按鈕在擴充管理頁面中更新插件。

通過這些步驟，你可以在浏覽器中高效地測試和調試 Chrome 插件的功能。

三、插件釋出到 Chrome Web Store

以下的釋出谷歌插件的步驟

1. 建立開發者賬号: 前往 [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard) 建立開發者賬号。

2. 打包插件: 在 Chrome 浏覽器中，進入擴充程式頁面，點選“打包擴充程式”，選擇插件的根目錄進行打包。

3. 上傳插件: 登入開發者賬号，上傳打包後的 `.zip` 檔案。

4. 填寫資訊: 填寫插件的詳細資訊，包括名稱、描述、截圖等。

5. 支付費用: 支付一次性注冊費用：5美元。

6. 送出稽核: 送出插件進行稽核，稽核通過後即可釋出。

由于部落客囊中羞澀，就沒有支付費用，各位感興趣的小夥伴可以通過以上步驟嘗試去釋出自己的插件，讓更多的人看到。

四、總結

本文通過《京東價保》插件給我帶來的便利，引發了個人探索浏覽器插件的思考。通過實作一個簡單的浏覽器插件，幫助我們認識、掌握、應用浏覽器插件的基本原理。更深入的知識咱們可以通過官網去學習。

最後，最重要的一點：

歡迎評論區互動，大家一起來找bug。

歡迎大家交流學習，共同成長。

人人都能手寫的chrome插件，幫我省了1000多塊錢

一、 為什麼要手寫浏覽器插件