在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

一、引言

浏览器扩展（Browser Extension）是一种运行在浏览器中的小程序，用于增强浏览器的功能或修改网页内容。通过开发浏览器扩展，你可以实现各种功能，如广告拦截、密码管理、笔记记录、网页翻译等。本文将详细介绍浏览器扩展开发的基本概念、开发流程、常用API以及最佳实践，帮助读者从零开始开发一个实用的浏览器扩展。

二、浏览器扩展的基本概念

（一）什么是浏览器扩展

浏览器扩展是一种运行在浏览器中的小程序，它可以通过HTML、CSS和JavaScript等Web技术开发。扩展可以访问浏览器提供的特殊API，从而实现各种功能，如修改网页内容、增强浏览器功能、访问用户数据等。

（二）扩展的组成

一个典型的浏览器扩展通常由以下部分组成：

  1. manifest.json：扩展的配置文件，定义了扩展的基本信息、权限、图标、后台脚本等。
  2. 弹出页面（Popup）：用户点击扩展图标时显示的页面。
  3. 后台脚本（Background Script）：负责执行后台任务，如监听事件、管理扩展的状态等。
  4. 内容脚本（Content Script）：注入到网页中，用于修改网页内容或与网页交互。
  5. 图标（Icons）：扩展的图标，用于在浏览器工具栏中显示。

三、开发环境准备

（一）浏览器

推荐使用最新版本的Google Chrome或Microsoft Edge（基于Chromium）。这些浏览器提供了丰富的开发者工具和扩展API，方便开发和调试。

（二）代码编辑器

推荐使用VS Code、Sublime Text或Atom等代码编辑器。这些工具提供了良好的代码高亮、自动补全和调试功能，有助于提高开发效率。

（三）基本的Web开发知识

熟悉HTML、CSS和JavaScript等Web技术是开发浏览器扩展的基础。如果你还不熟悉这些技术，建议先学习相关的基础知识。

四、开发一个简单的浏览器扩展

（一）创建项目文件夹

在你的计算机上创建一个新的文件夹，例如my_first_extension。

（二）添加图标

在项目文件夹中创建一个icons文件夹，并添加三种不同尺寸的图标：icon16.png、icon48.png和icon128.png。

（三）编写manifest.json

manifest.json是扩展的核心配置文件，定义了扩展的基本信息、权限、图标、弹出页面等。以下是一个简单的manifest.json示例：

{
    "manifest_version": 3,
    "name": "My First Extension",
    "version": "1.0",
    "description": "This is my first Chrome extension!",
    "permissions": ["activeTab"],
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
        }
    },
    "background": {
        "service_worker": "background.js"
    },
    "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    }
}

（四）添加弹出页面

弹出页面是用户点击扩展图标时显示的页面。以下是一个简单的popup.html示例：

<!DOCTYPE html>
<html>
<head>
    <title>My First Extension</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, Chrome!</h1>
    <button id="clickMe">Click Me!</button>
    <script src="popup.js"></script>
</body>
</html>

（五）添加样式文件

样式文件用于美化弹出页面。以下是一个简单的style.css示例：

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

h1 {
    font-size: 16px;
    color: #333;
}

button {
    padding: 10px 15px;
    font-size: 14px;
    background-color: #0078D7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #005A9E;
}

（六）添加JavaScript文件

JavaScript文件用于实现弹出页面的功能。以下是一个简单的popup.js示例：

document.getElementById('clickMe').addEventListener('click', function() {
    alert('Button clicked!');
});

（七）添加后台脚本

后台脚本负责执行后台任务，如监听事件、管理扩展的状态等。以下是一个简单的background.js示例：

console.log('Background service worker running!');

五、加载扩展

（一）在Chrome中加载扩展

  1. 打开Chrome浏览器，输入chrome://extensions/并按回车。
  2. 在右上角启用开发者模式。
  3. 点击“加载已解压的扩展”，选择你的项目文件夹（my_first_extension）。
  4. 你会在扩展列表中看到你的扩展。

（二）测试扩展

点击浏览器工具栏中的扩展图标，会弹出你定义的弹出页面。点击按钮，你应该会看到提示框弹出，显示“Button clicked!”。

六、常用API

（一）chrome.tabs API

chrome.tabs API用于操作浏览器的标签页，例如打开新标签页、获取当前标签页的URL等。

示例
// 打开新标签页
chrome.tabs.create({ url: "https://www.example.com" });

// 获取当前标签页的URL
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    console.log(tabs[0].url);
});

（二）chrome.storage API

chrome.storage API用于在浏览器中存储数据，例如保存用户偏好设置、缓存数据等。

示例
// 存储数据
chrome.storage.sync.set({ key: "value" }, function() {
    console.log("Data saved");
});

// 获取数据
chrome.storage.sync.get("key", function(data) {
    console.log("Data retrieved:", data.key);
});

（三）chrome.runtime API

chrome.runtime API用于管理扩展的运行时行为，例如发送消息、获取扩展的URL等。

示例
// 发送消息
chrome.runtime.sendMessage({ greeting: "hello" }, function(response) {
    console.log("Response received:", response);
});

// 监听消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.greeting === "hello") {
        sendResponse({ farewell: "goodbye" });
    }
});

（四）内容脚本

内容脚本是注入到网页中的脚本，用于修改网页内容或与网页交互。内容脚本可以通过chrome.tabs.executeScript方法注入到网页中。

示例
// 注入内容脚本
chrome.tabs.executeScript({
    code: "document.body.style.backgroundColor = 'yellow';"
});

七、调试技巧

（一）使用开发者工具

Chrome开发者工具提供了丰富的调试功能，可以帮助你调试扩展。你可以通过以下步骤打开开发者工具：

  1. 点击浏览器工具栏中的扩展图标。
  2. 右键点击弹出页面，选择“检查”。
  3. 在开发者工具中，你可以查看控制台日志、调试JavaScript代码、检查网络请求等。

（二）查看扩展的控制台日志

你可以在扩展的控制台中查看日志信息，帮助你调试扩展。以下是一个简单的示例：

  1. 打开Chrome浏览器，输入chrome://extensions/并按回车。
  2. 在右上角启用开发者模式。
  3. 点击扩展卡片中的“背景页”链接，打开背景页的控制台。
  4. 在控制台中，你可以查看日志信息，帮助你调试扩展。

（三）重新加载扩展

在开发过程中，你可能需要频繁修改代码并重新加载扩展。你可以通过以下步骤重新加载扩展：

  1. 点击扩展卡片中的“重新加载”按钮，重新加载扩展。
  2. 你也可以通过chrome://extensions/页面中的“重新加载”按钮重新加载扩展。

八、最佳实践

（一）性能优化

  • 减少DOM操作：避免频繁的DOM操作，使用事件委托和批量操作来提高性能。
  • 合理使用缓存：使用chrome.storage API缓存数据，减少不必要的网络请求。
  • 异步操作：使用异步操作避免阻塞主线程，提升用户体验。

（二）安全性

  • 限制权限：仅请求必要的权限，避免过度权限导致安全问题。
  • 加密存储：对敏感数据进行加密存储，防止数据泄露。
  • 使用HTTPS：确保数据在传输过程中加密，防止中间人攻击。

（三）用户体验

  • 简洁的UI：设计简洁、直观的用户界面，提升用户体验。
  • 提供反馈：在用户操作时提供明确的反馈，例如显示加载动画、提示信息等。
  • 支持多语言：为不同语言的用户提供本地化的支持，提升国际化体验。

九、实战案例：开发一个广告拦截扩展

（一）需求分析

广告拦截扩展的主要功能是拦截网页中的广告内容。广告通常可以通过特定的URL模式或DOM结构识别。我们将开发一个简单的广告拦截扩展，拦截特定URL的广告内容。

（二）项目结构

ad-blocker/
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── manifest.json
├── background.js
└── popup.html

（三）编写manifest.json

{
    "manifest_version": 3,
    "name": "Ad Blocker",
    "version": "1.0",
    "description": "A simple ad blocker extension",
    "permissions": ["activeTab", "webRequest", "webRequestBlocking"],
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
        }
    },
    "background": {
        "service_worker": "background.js"
    },
    "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    }
}

（四）编写background.js

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        if (details.url.includes("example-ad.com")) {
            return { cancel: true };
        }
        return { cancel: false };
    },
    { urls: ["<all_urls>"] },
    ["blocking"]
);

（五）编写popup.html

<!DOCTYPE html>
<html>
<head>
    <title>Ad Blocker</title>
    <style>
        body {
            width: 200px;
            text-align: center;
            font-family: Arial, sans-serif;
        }

        h1 {
            font-size: 16px;
            color: #333;
        }

        button {
            padding: 10px 15px;
            font-size: 14px;
            background-color: #0078D7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #005A9E;
        }
    </style>
</head>
<body>
    <h1>Ad Blocker</h1>
    <button id="toggleAdBlock">Toggle Ad Block</button>
    <script>
        document.getElementById('toggleAdBlock').addEventListener('click', function() {
            chrome.storage.sync.get('adBlockEnabled', function(data) {
                const enabled = data.adBlockEnabled === undefined ? true : !data.adBlockEnabled;
                chrome.storage.sync.set({ adBlockEnabled: enabled }, function() {
                    alert(enabled ? 'Ad Block enabled' : 'Ad Block disabled');
                });
            });
        });
    </script>
</body>
</html>

（六）测试扩展

  1. 打开Chrome浏览器，输入chrome://extensions/并按回车。
  2. 在右上角启用开发者模式。
  3. 点击“加载已解压的扩展”，选择你的项目文件夹（ad-blocker）。
  4. 你会在扩展列表中看到你的扩展。
  5. 点击扩展图标，弹出页面中有一个按钮，点击按钮可以启用或禁用广告拦截功能。
  6. 访问一个包含广告的网页，观察广告是否被拦截。

十、总结

通过本文的介绍，你已经了解了浏览器扩展开发的基本概念、开发流程、常用API以及最佳实践。开发浏览器扩展不仅可以提升你的编程技能，还能让你在日常浏览中享受到更多便利。希望你在这个过程中感受到乐趣，并开发出更多实用的浏览器扩展。

在未来开发中，你可以根据具体需求，结合更多高级功能和技术，如Service Workers、WebAssembly等，实现更强大的扩展功能。同时，持续关注浏览器扩展的新特性和技术，不断提升自己的技术水平，以适应不断变化的Web开发需求。

# 状态模式 # 前端 # 面试
Logo
武汉城市开发者社区

为武汉地区的开发者提供学习、交流和合作的平台。社区聚集了众多技术爱好者和专业人士，涵盖了多个领域，包括人工智能、大数据、云计算、区块链等。社区定期举办技术分享、培训和活动，为开发者提供更多的学习和交流机会。

更多推荐

cover

从“看得见”到“可操作”：Multiverse 3.0 如何定义物理AI时代的数字孪生？

avatar 武汉城市开发者社区

亮数据“数据集”产品的特点及优势，使用购买过程。

新手用户注册就送25刀试用金:亮数据官方号:

avatar 武汉城市开发者社区
cover

大模型推理为什么这么贵：从 KV Cache 到 PagedAttention 的工程细节

avatar 武汉城市开发者社区