什么是 Chrome 插件
Chrome 插件程序是一種用于增強 Google Chrome 瀏覽器功能的小型軟件應用程序。它們可以幫助用戶自定義瀏覽體驗、添加新功能、集成外部服務以及自動化任務等。擴展程序使用 HTML、CSS 和 JavaScript 編寫，利用 Chrome 提供的 API 來與瀏覽器及其內容進行交互。
在平時的開發工作中，可以通過開發一些小的功能插件來提高我們的工作效率。開發 Chrome 插件非常簡單，一個配置文件和幾個 JS 就可以完成，本文將實現一個簡單的插件，點擊按鈕修改百度輸入框背景色。插件主要包括一下兩個文件
- manifest.json：插件定義
- default_popup： 入口文件
添加manifest.json
manifest.json 文件插件的定義文件
{"manifest_version": 3,"name": "Highlight Input Box","version": "1.0","description": "A simple Chrome extension to highlight input boxes on the current page","action": {"default_popup": "popup.html","default_icon": {"16": "icon.png","48": "icon.png","128": "icon.png"}},"permissions": ["activeTab","scripting"]
}入口頁面 popup.html
彈出頁面是指當點擊插件時彈出的 HTML 頁面，頁面引入一個 JS 并添加了一個按鈕。
<!DOCTYPE html>
<html>
<head><title>Highlight Input Box</title><script src="popup.js"></script>
</head>
<body><button id="highlightInputs">Highlight Input Boxes</button>
</body>
</html>創建 popup.js
獲取當前活動窗口并執行腳本：
document.addEventListener('DOMContentLoaded', function() {const button = document.getElementById('highlightInputs');console.log(button)if (button) {button.addEventListener('click', function() {// 獲取當前活動的標簽頁并執行內容腳本chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {chrome.scripting.executeScript({target: { tabId: tabs[0].id },files: ['contentScript.js']}, () => {if (chrome.runtime.lastError) {console.error(chrome.runtime.lastError);} else {console.log('Content script injected');}});});});} else {console.error('Button with id "highlightInputs" not found.');}
});創建contentScript.js
contentScript.js 主要是修改背景的邏輯：
// contentScript.js
function highlightInputBoxes() {const inputBoxes = document.querySelectorAll('input[type="text"], input[type="search"], textarea');inputBoxes.forEach(input => {input.style.backgroundColor = 'yellow';});
}// 執行高亮函數
highlightInputBoxes();
運行插件
進入擴展管理，打開開發者模式并導入剛剛創建的目錄
點擊按鈕并查看運行效果
打開監控彈窗，可以查看插件的 log 日志
總結
開發簡單的 Chrome 插件速度很快，定義好配置文件和入口文件，基本框架就完成了，之后就是開發插件的邏輯了。
![[深度學習]基于yolov8+bytetrack+pyqt5實現車輛進出流量統計+車輛實時測速實現](http://pic.xiahunao.cn/[深度學習]基于yolov8+bytetrack+pyqt5實現車輛進出流量統計+車輛實時測速實現)
