在網(wǎng)購(gòu)的世界里，價(jià)格波動(dòng)常常讓人感到無(wú)奈。《京東價(jià)保》插件通過(guò)定時(shí)監(jiān)控已購(gòu)商品價(jià)格變化，降價(jià)自動(dòng)申請(qǐng)京東價(jià)格保護(hù)，幫我省下了不少錢(qián)。

作為一個(gè)前端開(kāi)發(fā)工程師，這讓我意識(shí)到，手寫(xiě)一個(gè)瀏覽器插件是一件很有趣且有意義的事。

于是，我決定嘗試自己動(dòng)手，開(kāi)發(fā)一個(gè)簡(jiǎn)單的二維碼生成器插件，各位小伙伴也可參考以下步驟實(shí)現(xiàn)自己想要的插件。

一、 為什么要手寫(xiě)瀏覽器插件

手寫(xiě)插件有許多好處，以下是一些詳細(xì)的原因：

1.1 個(gè)性化定制

手寫(xiě)插件可以根據(jù)個(gè)人需求進(jìn)行定制。市面上的插件功能可能不完全符合你的需求，而自己動(dòng)手開(kāi)發(fā)插件，可以精確地實(shí)現(xiàn)你想要的功能。

1.2. 解決特定問(wèn)題

有時(shí)，你可能需要一個(gè)非常特定的功能，而現(xiàn)有的插件無(wú)法提供。手寫(xiě)插件可以幫助你快速解決這些特定問(wèn)題，提高工作效率。

1.3 增強(qiáng)安全性

使用第三方插件時(shí)，安全性是一個(gè)重要的考慮因素。自己開(kāi)發(fā)插件，可以確保代碼的安全性，避免潛在的隱私泄露或惡意行為。

1.4 節(jié)省成本

雖然許多插件是免費(fèi)的，但一些高級(jí)功能需要付費(fèi)。通過(guò)手寫(xiě)插件，你可以免費(fèi)獲得這些功能，同時(shí)避免不必要的開(kāi)支。

總之，手寫(xiě)插件不僅能帶來(lái)技術(shù)上的成長(zhǎng)，還能在日常生活中提供實(shí)際的便利和解決方案。

二、 如何手寫(xiě)瀏覽器插件

2.1 認(rèn)識(shí)插件目錄結(jié)構(gòu)

一個(gè) Chrome 插件通常包含以下文件和目錄：

my-qrcode-plugin/
│
├── manifest.json  // 插件的配置文件，定義插件的基本信息、權(quán)限和功能。
├── background.js  // 后臺(tái)腳本，負(fù)責(zé)處理插件的邏輯，例如創(chuàng)建右鍵菜單。
├── popup.html     // 插件的彈出頁(yè)面，用戶(hù)點(diǎn)擊插件圖標(biāo)時(shí)顯示。
├── http://m.makelele.cn/images/chaijie_default.png       // 插件的彈出頁(yè)面，執(zhí)行的腳本。
└── icons/         // 存放插件的圖標(biāo)，建議提供 16x16、48x48 和 128x128 像素的圖標(biāo)，不同大小的圖標(biāo)有不同的作用。
    ├── icon16.png
    ├── icon48.png
    └── icon128.png
    

2.2 編寫(xiě) 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 編寫(xiě) background.js

background.js 負(fù)責(zé)插件后臺(tái)的邏輯實(shí)現(xiàn)：

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 編寫(xiě) popup.html

popup.html 是插件的用戶(hù)界面：

 
 
 QR Code Generator
 
 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;
 }
 

2.5 編寫(xiě) http://m.makelele.cn/images/chaijie_default.png

http://m.makelele.cn/images/chaijie_default.png 是插件的用戶(hù)界面的執(zhí)行腳本：

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 驗(yàn)證插件功能

在瀏覽器上測(cè)試 Chrome 插件功能，可以通過(guò)以下步驟進(jìn)行：

2.6.1. 加載未打包的擴(kuò)展

1.打開(kāi) Chrome 瀏覽器。

2.輸入 `chrome://extensions/` 進(jìn)入擴(kuò)展管理頁(yè)面。

3.打開(kāi)右上角的“開(kāi)發(fā)者模式”。

4.點(diǎn)擊“加載已解壓的擴(kuò)展程序”按鈕。

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

2.6.2. 驗(yàn)證功能

1. 在任意一個(gè)網(wǎng)頁(yè)中， 通過(guò)鼠標(biāo)右鍵找到菜單 Generate QR Code, 點(diǎn)擊該菜單，頁(yè)面生成一個(gè)二維碼，手機(jī)掃描二維碼即是該網(wǎng)頁(yè)，5S后二維碼消失視為驗(yàn)證通過(guò)。

右鍵菜單截圖：

?

??

二維碼生成效果圖：

??

2. 在瀏覽器右上角選擇該插件《Generate QR Code》，在網(wǎng)頁(yè)右上角生成對(duì)應(yīng)的二維碼，二維碼不消失，視為驗(yàn)證通過(guò)。

右上角插件入口截圖：

??

二維碼效果圖：

??

2.6.3. 實(shí)時(shí)修改和刷新

1.在開(kāi)發(fā)者工具中修改代碼后，可以直接保存并刷新插件或頁(yè)面以查看更改效果。

2.通過(guò)“重新加載”按鈕在擴(kuò)展管理頁(yè)面中更新插件。

通過(guò)這些步驟，你可以在瀏覽器中高效地測(cè)試和調(diào)試 Chrome 插件的功能。

三、 插件發(fā)布到 Chrome Web Store

以下的發(fā)布谷歌插件的步驟

1. 創(chuàng)建開(kāi)發(fā)者賬號(hào): 前往 [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard) 創(chuàng)建開(kāi)發(fā)者賬號(hào)。

2. 打包插件: 在 Chrome 瀏覽器中，進(jìn)入擴(kuò)展程序頁(yè)面，點(diǎn)擊“打包擴(kuò)展程序”，選擇插件的根目錄進(jìn)行打包。

3. 上傳插件: 登錄開(kāi)發(fā)者賬號(hào)，上傳打包后的 `.zip` 文件。

4. 填寫(xiě)信息: 填寫(xiě)插件的詳細(xì)信息，包括名稱(chēng)、描述、截圖等。

5. 支付費(fèi)用: 支付一次性注冊(cè)費(fèi)用：5美元。

6. 提交審核: 提交插件進(jìn)行審核，審核通過(guò)后即可發(fā)布。

由于博主囊中羞澀， 就沒(méi)有支付費(fèi)用， 各位感興趣的小伙伴可以通過(guò)以上步驟嘗試去發(fā)布自己的插件，讓更多的人看到。

四、 總結(jié)

本文通過(guò)《京東價(jià)?！凡寮o我?guī)?lái)的便利，引發(fā)了個(gè)人探索瀏覽器插件的思考。 通過(guò)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的瀏覽器插件，幫助我們認(rèn)識(shí)、掌握、應(yīng)用瀏覽器插件的基本原理。更深入的知識(shí)咱們可以通過(guò)官網(wǎng)去學(xué)習(xí)。

?

最后，最重要的一點(diǎn)：

歡迎評(píng)論區(qū)互動(dòng)， 大家一起來(lái)找bug。

歡迎大家交流學(xué)習(xí)，共同成長(zhǎng)。

審核編輯 黃宇