快速开发 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();