Chrome 插件開發實戰:從入門到進階

1.1 Chrome 插件的魅力與應用場景

Chrome 插件是增強 Chrome 瀏覽器功能的得力助手,能實現廣告攔截、密碼管理、標簽管理等實用功能。在日常辦公中,我們可以借助插件提升效率,如自動填充表單、快速保存網頁內容;在瀏覽網頁時,通過插件美化頁面、屏蔽廣告,優化瀏覽體驗;對于數據分析師或爬蟲愛好者,插件還能用于抓取網頁數據并保存到本地。Chrome 插件豐富了瀏覽器的功能,為用戶帶來了高度定制化的瀏覽體驗。

1.2 為什么要學習 Chrome 插件開發

Chrome 插件開發門檻較低,掌握基礎的 HTML、CSS 和 JavaScript 知識即可入門,同時能快速實現實用功能。通過開發插件,我們可以打造符合自己或團隊需求的工具,提升工作效率。此外,學習 Chrome 插件開發還能加深對 Web 技術的理解,拓展技術視野。而且,Chrome 瀏覽器市場占有率高,開發的插件能惠及大量用戶,具有廣泛的應用前景。

1.3 本文目標與讀者對象

本文旨在帶領讀者從零開始,逐步掌握 Chrome 插件開發的核心知識與實戰技巧。無論是對插件開發感興趣的初學者,還是有一定經驗想進一步提升的開發者,都能從本文中獲取有價值的信息。通過閱讀本文,讀者將了解 Chrome 插件的基本架構、核心 API,學會開發簡單插件,并掌握測試、調試及發布插件的方法。

二、Chrome 插件開發基礎

2.1 插件構成要素

2.1.1 manifest.json:插件的靈魂配置文件

manifest.json 是 Chrome 插件的核心配置文件,位于插件根目錄。它指定了插件的名稱、版本、圖標等基礎信息,同時根據插件功能聲明權限,確定要在后臺和網頁上運行哪些文件。例如:

json

{"manifest_version": 3,"name": "My Chrome Extension","version": "1.0","description": "這是一個簡單的Chrome插件示例","action": {"default_popup": "popup.html","default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}},"permissions": ["activeTab"]
}

其中,manifest_version聲明使用的 Manifest 版本,Chrome 推薦使用版本 3;nameversion分別為插件的名稱和版本號;action定義了插件的彈出窗口和圖標,這里指定了popup.html作為默認彈出頁面;permissions聲明插件需要的權限,activeTab權限用于訪問當前活躍的頁面。

2.1.2 Content Scripts:網頁內容的操控者

Content Scripts 是可以通過 DOM 操作網頁內容的腳本文件。它能在網頁上下文中運行,讀取和修改網頁的 DOM 元素、CSS 樣式以及 JavaScript 變量。例如,我們可以編寫 Content Scripts 來實現網頁元素的隱藏、樣式的修改或數據的提取。內容腳本的注入可以通過在 manifest.json 中進行靜態聲明,也可以動態聲明或以編程方式注入。例如,通過靜態聲明注入內容腳本的配置如下:

json

{"content_scripts": [{"matches": ["<all_urls>"],"js": ["content.js"]}]
}

上述配置表示content.js腳本將在所有網址的頁面中執行。

2.1.3 Service Worker:插件的后臺守護者

Service Worker 用于執行后臺任務,在擴展程序的整個生命周期中持續運行。它可以監聽瀏覽器標簽更新、監聽插件安裝或更新、定時通知提醒、實現廣告攔截,還能與彈出窗口或內容腳本通信。例如,使用 Service Worker 往內容腳本發消息,獲取當前 tab 的標題:

javascript

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {var tab = tabs[0];chrome.tabs.sendMessage(tab.id, { message: 'getTitle' }, function (response) {console.log('當前頁面標題:', response.title);});
});

在 manifest.json 中,通過以下配置指定 Service Worker 腳本:

json

{"background": {"service_worker": "service - worker.js"}
}

2.2 核心 API 解讀

2.2.1 chrome.tabs:標簽頁的魔法師

用途:用于操作瀏覽器標簽頁,如創建、切換、關閉或獲取當前活動標簽頁。
常用方法:

  • chrome.tabs.create(object createProperties, function callback):創建新標簽頁。例如,chrome.tabs.create({ url: 'https://www.example.com' });將打開一個指定網址的新標簽頁。
  • chrome.tabs.query(object queryInfo, function callback):查詢標簽頁。如chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { /* 處理查詢結果 */ });可獲取當前活動窗口中的活動標簽頁。
  • chrome.tabs.update(tabId, object updateProperties, function callback):更新標簽頁屬性,如chrome.tabs.update(tabId, { url: 'https://new - url.com' });可更改指定標簽頁的網址。
2.2.2 chrome.action:插件圖標的掌控者

用途:允許開發者控制插件圖標的外觀、交互行為以及彈出窗口(Popup)。
常用方法:

  • chrome.action.setIcon(object details, function callback):設置插件圖標。例如,chrome.action.setIcon({ path: 'new - icon.png' });可更換插件圖標。
  • chrome.action.setPopup(object details, function callback):設置插件彈出窗口。如chrome.action.setPopup({ popup: 'new - popup.html' });可改變插件點擊后彈出的頁面。
  • chrome.action.onClicked.addListener(function callback):監聽插件圖標點擊事件。chrome.action.onClicked.addListener(function (tab) { console.log('插件圖標被點擊了'); });在圖標被點擊時執行相應操作。
2.2.3 chrome.storage:數據存儲的小助手

用途:用于存儲插件數據,當用戶清除瀏覽數據時,擴展程序存儲空間不會被清除。
兩種存儲方式:

  • chrome.storage.sync:同步存儲,數據會在用戶的多個設備間同步。例如:

javascript

chrome.storage.sync.set({ key: 'value' }, function () {console.log('數據已同步存儲');
});
chrome.storage.sync.get(['key'], function (result) {console.log('獲取到的數據:', result.key);
});

  • chrome.storage.local:本地存儲,數據僅存儲在當前設備。使用方法與chrome.storage.sync類似,只需將sync替換為local
2.2.4 chrome.runtime:插件運行環境的管理者

用途:管理插件運行環境,支持后臺腳本與內容腳本通信。
常用方法:

  • chrome.runtime.sendMessage(destination, message, options, function responseCallback):發送消息。例如,在后臺腳本中向內容腳本發送消息:

javascript

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {var tab = tabs[0];chrome.tabs.sendMessage(tab.id, { message: 'hello from background' }, function (response) {console.log('收到內容腳本的響應:', response);});
});

在內容腳本中接收消息:

javascript

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {if (message.message === 'hello from background') {sendResponse({ response: 'hello back' });}
});

  • chrome.runtime.onInstalled.addListener(function callback):監聽插件安裝或更新事件。可用于在插件安裝或更新時執行初始化操作。
2.2.5 chrome.webRequest:網絡請求的攔截者

用途:監控或修改 HTTP 請求(需在 manifest.json 聲明權限)。
適用場景:廣告攔截等。
示例(攔截請求):
在 manifest.json 中添加權限:

json

{"permissions": ["webRequest", "webRequestBlocking"]
}

在后臺腳本中攔截請求:

javascript

chrome.webRequest.onBeforeRequest.addListener(function (details) {if (details.url.match(/ads\.example\.com/)) {return { cancel: true };}return {};},{ urls: ["<all_urls>"] },["blocking"]
);

上述代碼可攔截所有指向ads.example.com的請求。

2.2.6 chrome.contextMenus:右鍵菜單的定制者

用途:在瀏覽器右鍵菜單中添加自定義選項。
示例:
在 manifest.json 中添加權限:

json

{"permissions": ["contextMenus"]
}

在后臺腳本中創建右鍵菜單:

javascript

chrome.contextMenus.create({title: "Search Google for '%s'",contexts: ["selection"],onclick: function (info, tab) {var searchText = info.selectionText;chrome.tabs.create({ url: `https://www.google.com/search?q=${searchText}` });}
});

上述代碼在用戶右鍵選擇文本時,添加一個 “Search Google for '% s'” 的菜單選項,點擊后將在新標簽頁中搜索所選文本。

2.2.7 chrome.notifications:桌面通知的發送者

用途:向用戶發送系統級通知(需權限)。
示例:
在 manifest.json 中添加權限:

json

{"permissions": ["notifications"]
}

在后臺腳本中發送通知:

javascript

chrome.notifications.create('reminder', {type: 'basic',title: '提醒',message: '該做某事啦!',iconUrl: 'icon.png'
});

上述代碼將發送一個簡單的桌面通知。

三、插件開發實戰

3.1 “Hello World” 插件:插件開發初體驗

3.1.1 創建項目結構

首先,創建一個名為HelloWorld的文件夾,作為插件項目的根目錄。在該文件夾下,再創建一個popup文件夾。項目結構如下:

plaintext

HelloWorld/
├── popup/

圖片可以從 iconfont 等圖標庫下載,準備好三種不同尺寸的圖標:icon16.pngicon48.pngicon128.png,并將它們放置在HelloWorld文件夾中。

3.1.2 編寫 manifest.json

HelloWorld文件夾中創建manifest.json文件,并添加以下內容:

json

{"manifest_version": 3,"name": "Hello Extensions","description": "Base Level Extension","version": "1.0","action": {"default_popup": "popup/popup.html","default_icon": {"16": "icon16.png","48": "icon48.png","128": "icon128.png"}}
}

manifest.json文件聲明了插件的基本信息,包括插件規范版本、名稱、描述、版本和圖標,同時通過action字段指定了點擊插件圖標后彈出的窗口為popup/popup.html

3.1.3 構建 popup 頁面

popup文件夾中創建popup.html文件,內容如下:

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial - scale = 1.0"><title>Hello World</title><link rel="stylesheet" href="popup.css">
</head><body><h1>Hello World!</h1><script src="popup.js"></script>
</body></html>

接著,在popup文件夾中創建popup.css文件,添加簡單的樣式:

css

body {width: 200px;text - align: center;font - family: Arial, sans - serif;
}h1 {color: #333;
}

此時,一個簡單的 “Hello World” 插件已編寫完成。

3.1.4 加載與測試插件

在瀏覽器新標簽頁中輸入chrome://extensions/,或者通過工具欄打開擴展程序頁面。點擊開發者模式旁邊的切換開關,啟用開發者模式。點擊 “加載已解壓縮的文件” 按鈕,選擇HelloWorld文件夾。安裝完插件后,在工具欄點擊插件圖標,即可看到彈出的 “Hello World!” 界面。

3.2 內容腳本實戰:為網頁添加自定義元素

3.2.1 項目結構搭建

創建一個新的項目文件夾,例如ContentScriptDemo。在該文件夾下,創建content.js文件和manifest.json文件。項目結構如下:

plaintext

ContentScriptDemo/
├── content.js
├── manifest.json
3.2.2 配置 manifest.json

manifest.json文件中添加以下內容:

json

{"manifest_version": 3,"name": "Content Script Example","description": "Add custom element to web pages","version": "1.0","content_scripts": [{"matches": ["<all_urls>"],"js": ["content.js"]}]
}

上述配置通過content_scripts字段指定了content.js腳本將在所有網址的頁面中執行。

3.2.3 編寫內容腳本 content.js

content.js文件中編寫如下代碼:

javascript

// 創建一個新的div元素
var newDiv = document.createElement('div');
newDiv.style.color ='red';
newDiv.style.fontSize = '20px';
newDiv.textContent = '這是插件添加的自定義內容';// 將新元素添加到頁面body中
document.body.appendChild(newDiv);

該腳本會在頁面的body中插入一個紅色、字體大小為 20px 的文本內容 “這是插件添加的自定義內容”。

3.2.4 測試內容腳本效果

按照前面介紹的方法,在 Chrome 瀏覽器中加載已解壓縮的ContentScriptDemo插件。刷新任意網頁,即可看到頁面中添加了自定義的元素。

3.3 使用 Service Worker 實現定時通知

3.3.1 項目結構規劃

創建一個名為ServiceWorkerNotification的項目文件夾。在該文件夾下,創建service - worker.jsmanifest.json文件,項目結構如下:

plaintext

ServiceWorkerNotification/
├── service - worker.js
├── manifest.json
3.3.2 配置 manifest.json 支持 Service Worker

manifest.json文件中添加如下內容:

json

{"manifest_version": 3,"name": "Service Worker Notification","description": "Send定時通知using Service Worker","version": "1.0","background": {"service_worker": "service - worker.js"},"permissions": ["notifications"]
}

這里通過background字段指定了后臺運行的 Service Worker 腳本為service - worker.js,并聲明了notifications權限用于發送通知。

3.3.3 編寫 Service Worker 代碼實現定時通知

service - worker.js文件中編寫如下代碼:

javascript

self.addEventListener('install', function (event) {event.waitUntil(self.registration.showNotification('插件已安裝', {body: '感謝安裝本插件!'}));
});self.addEventListener('activate', function (event) {event.waitUntil(self.registration.showNotification('插件已激活', {body: '插件已激活,開始提供服務。'}));
});// 每小時發送一次通知
setInterval(function () {self.registration.showNotification('定時提醒', {body: '一小時過去了,休息一下吧!'});
}, 60 * 60 * 1000);

上述代碼在插件安裝和激活時會發送通知,并且每小時發送一次定時提醒通知。

3.3.4 加載插件并驗證定時通知功能

在 Chrome 瀏覽器中加載已解壓縮的ServiceWorkerNotification插件。插件安裝后,會立即收到安裝通知,激活時會收到激活通知,之后每小時會收到一次定時提醒通知,驗證了 Service Worker 實現定時通知的功能。

四、插件的測試與調試

4.1 利用 Chrome 開發者工具進行調試

4.1.1 打開插件調試界面

在 Chrome 瀏覽器中,進入chrome://extensions/頁面,確保已啟用開發者模式。找到要調試的插件,點擊插件卡片上的 “詳情” 按鈕。在插件詳情頁面中,會看到 “檢查視圖” 選項,點擊 “background page” 對應的 “檢查” 按鈕,可打開后臺腳本的調試界面;如果插件有彈出窗口,點擊 “popup” 對應的 “檢查” 按鈕,可調試彈出窗口的代碼。

4.1.2 調試技巧與常用功能
  • 設置斷點:在調試界面的代碼編輯器中,點擊代碼行號旁邊的空白處,即可設置斷點。當代碼執行到斷點處時,會暫停執行,此時可以查看變量的值、單步執行代碼等。
  • 查看控制臺輸出:在調試界面的控制臺中,可以查看插件運行過程中輸出的日志信息。通過console.log()等方法輸出的內容會顯示在此

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/94335.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/94335.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/94335.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

通過官方文檔詳解Ultralytics YOLO 開源工程-熟練使用 YOLO11實現分割、分類、旋轉框檢測和姿勢估計(附測試代碼)

目錄 前言&#xff1a; 1.了解ultralytics工程與yolo模型 1.1 yolo11可以為我們做些什 1.2 yolo11模型的高性能 1.3 對于yolo11一些常見的問題 1.3.1 YOLO11 如何以更少的參數實現更高的精度&#xff1f; 1.3.2 YOLO11 可以部署在邊緣設備上嗎&#xff1f; 2. 深入了解y…

vue實現小程序oss分片上傳

隨著小程序越來越普及,小程序上傳文件必不可少,那么上傳的文件大小就不可控了,小則幾mb,大到好幾百mb,小文件還可以,但是一到超過200mb或稍微再大些的小程序就很容易上傳失敗,導致功能不能繼續進行。以下我們就來解決這個問題,將大文件實現分片上傳 溫馨提示,不要看內…

14.Shell腳本修煉手冊--玩轉循環結構(While 與 Until 的應用技巧與案例)

while 循環和 until 循環的應用實踐 文章目錄while 循環和 until 循環的應用實踐當型和直到型循環&#xff1a;兩種 "重復" 的邏輯while 循環&#xff1a;滿足條件就繼續until 循環&#xff1a;不滿足條件就繼續基礎示例&#xff1a;從簡單場景學用法示例 1&#xff…

chromadb使用hugging face模型時利用鏡像網站下載注意事項

chromadb默認使用sentence-transformers/all-MiniLM-L6-v2的詞嵌入&#xff08;詞向量&#xff09;模型&#xff0c;如果在程序首次運行時&#xff0c;collection的add或query操作時如果沒有指定embeddings或query_embeddings&#xff0c;程序會自動下載相關嵌入向量模型&#…

基于大模型的對話式推薦系統技術架構設計

注&#xff1a;此文章內容均節選自充電了么創始人&#xff0c;CEO兼CTO陳敬雷老師的新書《GPT多模態大模型與AI Agent智能體》&#xff08;跟我一起學人工智能&#xff09;【陳敬雷編著】【清華大學出版社】 清華《GPT多模態大模型與AI Agent智能體》書籍配套視頻課程【陳敬雷…

第1章 React組件開發基礎

在掌握React開發之前,我們需要先建立扎實的組件開發基礎。這些基礎知識不僅影響你的開發效率,更決定了應用程序的性能、可維護性和團隊協作的順暢程度。 本章將深入探討React組件開發的核心技巧,從JSX語法優化到組件架構設計,幫你建立正確的React開發思維模式。 ??? 本…

【yocto】Yocto Project 配置層(.conf)文件語法詳解

【加關注&#xff0c;不迷路&#xff0c;持續輸出中...】Yocto Project 是一個開源的嵌入式 Linux 系統構建框架&#xff0c;其核心是通過元數據&#xff08;Metadata&#xff09;來定義如何構建系統。這些元數據主要包括配方&#xff08;.bb / .bbappend&#xff09;、配置&am…

知識蒸餾 Knowledge Distillation 序列的聯合概率 分解成 基于歷史的條件概率的連乘序列

知識蒸餾 Knowledge Distillation 序列的聯合概率 分解成 基于歷史的條件概率的連乘序列 flyfish 代碼實踐 論文 Generalized Knowledge Distillation (GKD) On-Policy Distillation of Language Models: Learning from Self-Generated Mistakes 自回歸分解 將 “序列的聯合…

React15.x版本 子組件調用父組件的方法,從props中拿的,這個方法里面有個setState,結果調用報錯

在React 15.x中&#xff0c;子組件通過props調用父組件包含setState的方法時出現錯誤&#xff0c;最常見的原因是父組件方法的this指向丟失&#xff0c;導致調用setState時出現Cannot read property setState of undefined之類的錯誤。 核心原因 React類組件的方法默認不會綁定…

交叉編譯.so到鴻蒙使用

以下是在 Ubuntu 20.04 系統上的操作&#xff0c;tpc_c_cplusplus 他是把編譯的流程都給寫進去了&#xff0c;你只需要關注你要編譯的庫配置好環境就行了。 第一步&#xff1a;下載 tpc_c_cplusplus 倉庫地址&#xff1a; GitCode - 全球開發者的開源社區,開源代碼托管平臺…

LLaMA-Factory 中配置文件或命令行里各個參數的含義

常見參數分類 & 含義對照表&#xff1a; &#x1f539;模型相關參數含義model_name_or_path基礎模型的路徑&#xff08;本地或 HuggingFace Hub 上的名字&#xff0c;如 meta-llama/Llama-2-7b-hf&#xff09;adapter_name_or_pathLoRA/Adapter 權重路徑&#xff08;如果要…

JavaScript 性能優化實戰技術文章大綱

一、引言1.1 背景闡述在當今 Web 應用高度交互化、復雜化的趨勢下&#xff0c;JavaScript 作為核心腳本語言&#xff0c;其性能優劣直接決定了用戶體驗的好壞。從單頁應用&#xff08;SPA&#xff09;的流暢運行&#xff0c;到復雜數據可視化的實時交互&#xff0c;JavaScript …

正點原子【第四期】Linux之驅動開發學習筆記-2.1LED燈驅動實驗(直接操作寄存器)

前言&#xff1a; 本文是根據嗶哩嗶哩網站上“正點原子【第四期】手把手教你學Linux系列課程之 Linux驅動開發篇”視頻的學習筆記&#xff0c;該課程配套開發板為正點原子alpha/mini Linux開發板。在這里會記錄下正點原子 I.MX6ULL 開發板的配套視頻教程所作的實驗和學習筆記內…

【GM3568JHF】FPGA+ARM異構開發板 測試命令

本章節的命令操作均在板卡的終端執行 1 初探/sys目錄 與/proc目錄類似&#xff0c;/sys目錄下的文件/文件夾向用戶提供了一些關于設備、內核模塊、文件系統以及其他內核組件的信息&#xff0c; 如子目錄block中存放了所有的塊設備&#xff1b;子目錄bus中存放了系統中所有的總…

【Win】Motrix+Aria2瀏覽器下載加速

系統安裝Motrix Motrix官網下載&#xff0c;推薦下載NSIS Installer 安裝版 瀏覽器安裝Aria2 下載Aria2插件&#xff0c;然后開發者模式安裝到瀏覽器 Aria2擴展選項的配置如下&#xff1a; 端口號需要改成Motrix的&#xff0c;默認是16800

SpringBoot applicationContext.getBeansOfType獲取某一接口所有實現類,應用于策略模式

本文介紹了如何在Springboot項目中通過ApplicationContext獲取接口的實現類&#xff0c;并通過枚舉策略模式避免if/else&#xff0c;展示了如何使用getBeansOfType獲取TrafficModeService的實現&#xff0c;以及如何在實際場景中應用&#xff0c;如查詢交通方式費用 1 在實際工…

大模型問題:幻覺分類+原因+各個訓練階段產生幻覺+幻覺的檢測和評估基準

1. 什么是幻覺&#xff1f;大模型出現幻覺&#xff0c;簡而言之就是“胡說八道”。 用《A Survey on Hallucination in Large Language Models》1文中的話來講&#xff0c;是指模型生成的內容與現實世界事實或用戶輸入不一致的現象。 研究人員將大模型的幻覺分為事實性幻覺&…

智慧冷庫物聯網解決方案——實現降本增效與風險可控的冷庫管理新范式

一、冷庫管理痛點設備孤島化&#xff1a;冷庫品牌、型號分散&#xff0c;缺乏統一接入標準&#xff0c;數據互通難&#xff0c;依賴人工巡檢&#xff0c;故障響應滯后。能耗黑洞&#xff1a;制冷系統能耗占冷庫總運營成本的60%以上&#xff0c;傳統管理粗放&#xff0c;缺乏動態…

太空生活的八種要素

數代以來&#xff0c;科學家們一直在銀河系中搜尋地外行星存在生命的證據。他們試圖找到一組特定的環境條件與化學物質&#xff0c;在恰當的時間、恰當的地點交匯融合。 通過研究人類、植物、動物及微生物在地球上的生存與繁衍方式&#xff0c;科學家們已識別出生命演化所需的關…

Flutter 小技巧之有趣的 UI 骨架屏框架 skeletonizer

很久沒有更新過小技巧系列&#xff0c;今天簡單介紹一個非常好用的骨架屏框架 skeletonizer &#xff0c;它主要是通過將你現有的布局自動簡化為簡單的骨架&#xff0c;并添加動畫效果來實現加載過程&#xff0c;而使用成本則是簡單的添加一個 Skeletonizer 作為 parent &…