快速开发 Chrome插件

什么是 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();