rxliuli blog
·
Browser Extension Dev - 01. 介绍基本概念
💡
原文中文，约4400字，阅读约需11分钟。
📝
内容提要
本文介绍了如何创建一个简单的浏览器扩展，以隐藏 Google 搜索页面上的 AI Mode 按钮。用户通过编写 manifest.json 和 content.js 文件来自定义网页体验，核心概念包括 Manifest 文件、内容脚本和注入时机。最后提到将使用现代开发工具重构扩展。
🎯
关键要点
- 浏览器扩展可以让用户自定义网页体验，赋予用户更多权限。
- 扩展的基本结构包括 manifest.json、content.js 等文件。
- manifest.json 文件包含扩展的基本信息，如名称、版本和描述。
- content.js 脚本用于在网页加载时自动隐藏特定元素，如 Google 搜索页面的 AI Mode 按钮。
- 使用 CSS 选择器来定位并隐藏按钮，确保选择器的稳定性。
- 在 manifest.json 中声明内容脚本的注入时机，确保脚本在合适的时机执行。
- 调试扩展时需要注意脚本注入的时机和可能出现的错误。
- 扩展可以添加图标，通过 manifest.json 中的 icons 设置来实现。
- 扩展开发的核心概念包括 Manifest 文件、内容脚本和注入时机。
- 下一章将使用现代开发工具重构扩展，体验更高效的开发流程。
❓
延伸问答
如何创建一个简单的浏览器扩展？
创建一个简单的浏览器扩展需要编写 manifest.json 和 content.js 文件，定义扩展的基本信息和功能。
manifest.json 文件的作用是什么？
manifest.json 文件包含扩展的基本信息，如名称、版本和描述，以及声明内容脚本的注入时机。
content.js 脚本的主要功能是什么？
content.js 脚本用于在网页加载时自动隐藏特定元素，例如 Google 搜索页面的 AI Mode 按钮。
如何调试浏览器扩展？
调试浏览器扩展时，需要注意脚本注入的时机和可能出现的错误，可以在 DevTools 中查看错误信息。
如何确保内容脚本在合适的时机执行？
在 manifest.json 中声明内容脚本的注入时机，可以选择 document_start、document_end 或 document_idle 来确保脚本在合适的时机执行。
扩展可以添加图标吗？如何实现？
可以通过在 manifest.json 中的 icons 设置添加扩展图标，需提供图像文件路径。
➡️
