Chrome扩展的核心:manifest 文件(上)

这篇具有很好参考价值的文章主要介绍了Chrome扩展的核心:manifest 文件(上)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大家好,我是dom哥。我正在写关于 Chrome 扩展开发的系列文章,感兴趣的可以点个小星星。

Chrome 在全球浏览器市场份额独占 6 成,无论是对普通用户还是开发者,都是电脑里的必备利器。Chrome 无论是在性能还是 UI 交互方面都非常出色,而 Chrome 扩展则为开发者提供了接口,让开发者有能力自己编写代码使自己的 Chrome 更强大,更加定制化。

每个 Chrome 扩展项目的根目录中都必须有一个 manifest.json 文件,即清单文件。manifest 里会记录关于扩展的重要元数据、声明权限以及指定在网页和后台中运行的文件等等。

最简单的 Chrome 扩展项目

新建一个 crx-demo 目录,在里面新建一个 manifest.json 文件,目录结构如下:

crx-demo
└── manifest.json

这就是一个最简单的 Chrome 扩展项目了!接下来就是不断丰富它的细节。

manifest 字段最小集

manifest 大约有 20 多个配置项,但大部分都是可选配置。必须的配置项有且仅有下面 3 个!

{
  "manifest_version": 3,
  "name": "CRX Demo",
  "version": "1.0.0"
}

是不是似曾相识,像不像前端项目里无人不知的 package.json 文件!

先不用追究每个字段的深层含义,这个稍后会逐个解释。接下来在 Chrome 里打开管理扩展程序 chrome://extensions/ 直接把 crx-demo 拽过来扔进去。或者你也可以 加载已解压的扩展程序

在扩展程序里就能看到这个扩展了🎉

Chrome扩展的核心:manifest 文件(上)

manifest 支持配置的字段

必须的字段

"manifest_version"

指定 manifest 的版本。不同的版本支持的配置字段不一样,格式也不一样,之前是 2,现在是 3,将来会是 4。区别有点像通信领域的 3G,4G,5G 概念。

"manifest_version": 3

V2 版本的扩展 Chrome 在2024年6月份会停止支持,届时 V2 版本的扩展将无法加载。将来可能会迭代到 V4 版本,但官方尚没有消息。因此目前及未来很长时间将都是 V3 版本的 Chrome 扩展。

"name"

扩展名字。**没啥好说的。有长度限制,最多 45 个字。

"name": "your extension name"

"version"

扩展的迭代版本。这个迭代版本的格式很有讲究,不同于 package.json 里的 version 那般随意。

这里 version 的格式和 IP 地址倒是很像。要求如下:

  • 最少 1 个最多 4 个整数用点号连接而成
  • 每部分整数值域为 0-65535

下面是一些支持使用的版本示例:

"version": "1"
"version": "1.0"
"version": "2.10.2"
"version": "3.1.2.4567"

之所以这样设计,是为了方便 Chrome 扩展的自动更新。

推荐的字段

"description"

扩展的描述。一个好的描述是成功推销的第一步。最多 132 个字。

"description": "扩展的描述"

"icons"

扩展的图标。一图胜万言。

"icons": {
  "48": "icon48.png",
  "128": "icon128.png"
}

官方建议至少应该提供 128x128 和 48x48 两个尺寸的图标。128x128 的用于 Chrome Web Store,48x48 的用于管理扩展页面(chrome://extensions)。

值得注意的是,不支持使用 WebP 和 SVG 格式的图标。其他的格式 PNG,JPEG,GIF,ICO,BMP 都是支持的!

继续完善细节,给 manifest.json 加上 "description" 和 "icons" 字段

+ "description": "扩展的描述"
+ "icons": {
+   "48": "icon48.png",
+   "128": "icon128.png"
+ }

在 chrome://extensions 刷新扩展,可以看到已经变成了这个样子:

Chrome扩展的核心:manifest 文件(上)

值得一提的是,"description" 和 "icons" 是你往 Chrome Web Store 发布扩展时必填的两个字段!

可选的字段

到目前为止,这个扩展还没有任何用处 😅,只是看上去有了点雏形。

在下一篇将详细介绍 manifest 几个强大的可选项,它们将为 Chrome 扩展注入灵魂:

  • "content_scripts": 向 web 页面注入 JavaScript 和 CSS。
  • "background": 以 service worker 形式运行后台服务。
  • "permissions": 权限管理,有些功能需要用户授权才能获得。

觉得不错可以点个小星星支持一下🌹文章来源地址https://www.toymoban.com/news/detail-754591.html

到了这里,关于Chrome扩展的核心:manifest 文件(上)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Chrome 浏览器 Manifest V3 版本中 scripting API 解析

    Chrome 浏览器 Manifest V3 版本中 scripting API 解析 使用  chrome.scripting API 在不同上下文中执行脚本。 可以使用  chrome.scripting API 将 JavaScript 和 CSS 注入网站。 scripting 使用  chrome.scripting API ,需要在 manifest.json 中声明  scripting  权限,以及要向其注入脚本的网页的主机权限。使

    2024年01月19日
    浏览(32)
  • Chrome 插件 V3 版本 Manifest.json 中的内容脚本(Content Scripts)解析

    指定在用户打开某些网页时要使用的 JavaScript 或 CSS 文件。 内容脚本是在网页环境中运行的文件。通过使用标准文档对象模型 ( DOM ),开发者能够读取浏览器所访问网页的详情、更改这些网页,并将信息传递给其父级扩展程序。 内容脚本在声明扩展程序文件为可通过网络访问

    2024年01月19日
    浏览(30)
  • chrome extensions插件declarativeNetRequest修改user-agent方法manifest v3版

    有能力的可以看官方文档:https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/#manifest 有一个需求,想通过插件的方式,修改请求头里面的user-agent,比如修改为iphone的头: 原本浏览器的请求头是: 通过查询发现,v2版本修改请求头的方式为:但是这种方式已经被废弃

    2024年02月01日
    浏览(70)
  • Chrome 浏览器插件从 Manifest V2 升级到 V3 版本所需要修改的点

    Chrome 浏览器官方已经给出确定的时间来弃用 V2 版本的插件了。 最早从 2024 年 6 月 的 Chrome 127 开始,我们将开始停用 Chrome 的不稳定版本(开发者版、 Canary 版和 Beta 版)中的 Manifest V2 扩展程序。受此变化影响的用户会在浏览器中看到 Manifest V2 扩展程序自动停用,并且无法再

    2024年01月16日
    浏览(38)
  • Chrome扩展之通信

    js类型 介绍 popup 单击插件图标后的弹窗中的js,由于单击图标打开popup,焦点离开又立即关闭,生命周期一般很短。 content-script 与页面共享DOM,但是不共享JS,可访问部分chrome扩展API。 background 权限最高,几乎可调用所有Chrome扩展API(除了devTools),且可以无限制跨域。生命周

    2024年01月23日
    浏览(26)
  • Chrome扩展开发系列开篇

    大家好,我是 dom 哥。这是我关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星。 研究机构 Statcounter 发布了 2023 年 9 月报告,揭示了有关浏览器的最新统计数据。 浏览器 市场份额 Chromium-based? Chrome 63.56% Yes Safari 19.85% No Edge 5.43% Yes Firefox 2.94% No Opera ... Yes 可以看到基

    2024年02月04日
    浏览(41)
  • 从零实现的Chrome扩展

    Chrome 扩展是一种可以在 Chrome 浏览器中添加新功能和修改浏览器行为的软件程序,例如我们常用的 TamperMonkey 、 Proxy SwitchyOmega 、 AdGuard 等等,这些拓展都是可以通过 WebExtensions API 来修改、增强浏览器的能力,用来提供一些浏览器本体没有的功能,从而实现一些有趣的事情。

    2024年02月17日
    浏览(33)
  • Chrome扩展开发实战:快速填充表单

    大家好,我是 dom 哥。我正在写关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星 。 填表单是打工人经常面对的场景,作为一个前端,我经常开发一些PC端的页面,它们主要由表单和表格构成,而输入框又是表单里最常见的表单项。 接下来就试着做一个简单的小扩展

    2024年02月04日
    浏览(39)
  • chrome 扩展 popup 弹窗的使用

    popup介绍 popup 是点击 browser_action 或者 page_action 图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。 popup配置 V3版本中(V2版本是在 browser_action 中 ),可以通过配置文件( manifest.json )中 action 里面的 default_popup 字段来指定 popup 页面,也

    2024年02月05日
    浏览(33)
  • chrome扩展控制popup页面动态切换

    下面在mv2版本的API下完成 实际上通过控制页面元素实现popup页面切换,是一种伪切换,从视觉上达到了切换效果,实际上还是一个popup.html popup.html示例 判断展示哪一个div的内容 不需要在manifest里单独配置browser_action,通过所在的页面决定使用哪一个popup.html页面 准备两个popu

    2024年02月15日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包