【教程向】从零开始创建浏览器插件(二)深入理解 Chrome 扩展的 manifest.json 配置文件

第二步:深入理解 Chrome 扩展的 manifest.json 配置文件

上一次我们已经着手完成了一个自己的浏览器插件,链接在这里:我是链接

在本篇博客中,我们将更详细地探讨 Chrome 扩展中的 manifest.json 文件。这个文件是每个浏览器扩展不可或缺的核心,它不仅定义了扩展的基本元数据,而且还规定了扩展的行为和权限。我们将深入探讨各种常用配置,并提供具体的代码示例以帮助您更好地理解和运用这些配置。

manifest.json 基本结构

每个 Chrome 扩展的 manifest.json 文件都必须包含以下基本字段:

  • manifest_version (必需):指明 manifest 文件的版本。目前版本为 3。
  • name (必需):扩展程序的名称。
  • version (必需):扩展程序的版本号。

一个简单的 manifest.json 文件看起来像这样:

json 复制代码
{
  "manifest_version": 3,
  "name": "Sample Extension",
  "version": "1.0"
}

常用配置详解

描述和图标

  • description:对扩展功能的简短描述。
  • icons:一个对象,定义了一系列图标,这些图标将在扩展目录、地址栏旁的扩展按钮以及其他界面中使用。
json 复制代码
"description": "A simple Chrome extension example.",
"icons": {
  "16": "icon16.png",
  "48": "icon48.png",
  "128": "icon128.png"
}

背景脚本

  • background :包含 service_worker 指向的脚本在扩展安装后立即持续运行,通常用于处理事件监听和维持扩展的生命周期。
json 复制代码
"background": {
  "service_worker": "background.js"
}

弹出页面

  • action:定义扩展的默认弹出行为,包括弹窗页面路径与默认图标。
json 复制代码
"action": {
  "default_popup": "popup.html",
  "default_icon": "icon48.png"
}

权限

  • permissions:扩展请求访问的 API 权限和其他特权。
json 复制代码
"permissions": [
  "storage",
  "tabs",
  "http://*/*",
  "https://*/*"
]

内容脚本

  • content_scripts:定义在特定页面自动注入的脚本和CSS。你可以指定脚本和CSS应应用到的网页URL模式。
json 复制代码
"content_scripts": [
  {
    "matches": ["http://*.example.com/*", "https://*.example.com/*"],
    "js": ["content.js"],
    "css": ["style.css"]
  }
]

选项页面

  • options_pageoptions_ui:指定一个HTML文件,用于配置扩展的选项。
json 复制代码
"options_ui": {
  "page": "options.html",
  "open_in_tab": true
}

主机权限

  • host_permissions:允许扩展访问列表中的网站。
json 复制代码
"host_permissions": [
  "http://*/*",
  "https://*/*"
]

小结

manifest.json 文件是浏览器扩展的核心,通过它可以精细地控制扩展的各种行为和权限设置。了解并正确使用这些配置项将帮助你高效地开发功能复杂的扩展程序。记得根据扩展的特定需求选择合适的配置项,以确保功能的实现和用户的安全。

希望这篇文章能帮助你更深入地理解和使用 manifest.json,并创建出功能强大、用户友好的 Chrome 扩展!

相关推荐
一只小风华~几秒前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918417 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技8 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip8 小时前
JavaScript二叉树相关概念
前端
rannn_1119 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go9 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x9 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java9 小时前
CSS3核心技术
前端·css·css3