《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(上)

简介: 《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(上)

1.6.2 Google 浏览器扩展程序


1.扩展程序介绍


扩展程序是可以定制浏览体验的小型软件程序,用户无须深入研究浏览器的原生代码就可 以根据个人需要或偏好来定制 Chrome 的功能和行为。对于 Web 开发人员来说,只需学习如何 通过 Chrome 公开的一些 JavaScript API 向 Chrome 添加功能即可,这大大降低了学习成本。


扩展程序会被压缩成可供用户下载并安装的以.crx 结尾的安装包。与普通的 Web 应用程 序不同,扩展程序不依赖 Web 上的内容,开发者完成扩展程序的开发后,将其上传至 Chrome  Web Store 即可供特定用户使用。接下来,我们开发一个插件并在本地完成安装。步骤如下。


我们分别在google_demo 的dist 文件夹下创建icon 文件夹和index.html、index.js、manifest.json、 style.css 文件,如图 1-43 所示。这里重点讲解一下 manifest.json 文件。


image.png

Chrome Web Store中,我们可以发布以下3种类型的项目:

应用程序(App);

主题(Theme);

扩展(Extension)程序。

3种项目都需要一个名为manifest.json的清单,这是一个用于描述项目具体细节的JSON格式的文件。通常情况下,该文件的格式是固定的,但是当要解决一些重要的问题时也会做一些改变。对于开发人员来说,我们应该在清单中通过设置manifest_version字段的值来明确所使用清单规范的版本,如代码清单1-24所示


代码清单 1-24


{
...,
"manifest_version": 2,
...}

2014 年 1 月,Chrome 停止加载或运行 manifest v1 版本的程序。截至 2020 年 1 月,manifest  v3 版本还没有发布,因此在我们的扩展程序中使用 manifest v2 是一个明智的选择。


后台脚本和许多其他重要组件必须在清单中注册,在清单中注册后台脚本会告诉扩展程序 要引用哪个文件及该文件的行为。我们查看清单中可以添加的字段摘要。


1)必要字段


必要字段包含当前扩展程序的版本信息、所使用清单文件的版本及扩展程序的名称,如代 码清单 1-25 所示。


代码清单1-25

{ 
"manifest_version": 2, 
"name": "My Extension", 
"version": "versionString"}

2)推荐字段

推荐字段包含当前扩展程序的图标、描述信息等,如代码清单1-26所示。

代码清单1-26

{ 
"default_locale": "en", 
"description": "A plain text description", 
"icons": {...} 
}


《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(中) https://developer.aliyun.com/article/1228438?groupCode=tech_library

相关文章
|
7月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
353 0
|
7月前
|
Rust JavaScript 前端开发
WebAssembly 技术:解锁浏览器的无限潜能
随着互联网的快速发展,Web 应用程序的功能需求也越来越复杂。传统的 JavaScript 语言在处理大规模数据和高性能计算方面存在一些局限性。然而,WebAssembly 技术的出现改变了这一切。本文将介绍什么是 WebAssembly,它的应用领域以及如何使用它来提升 Web 应用程序的性能和体验。
|
6月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
72 0
|
2月前
|
Web App开发 人工智能 前端开发
Google 浏览器中的 AI 魔法 — window.ai
本文介绍了如何在 Chrome Canary 中启用并使用设备端 AI 功能。通过下载 Chrome Canary 并启用相关 API,你可以在本地运行 AI 模型,无需互联网连接。文章详细讲解了设置步骤、确认 AI 可用性的方法以及如何使用 `window.ai` 进行文本会话。虽然目前的性能和功能还有待提升,但这一技术为未来的前端开发和智能应用提供了无限可能。
102 0
|
4月前
|
存储 JSON 监控
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
416 1
|
6月前
技术经验分享:360浏览器截图快捷键设置
技术经验分享:360浏览器截图快捷键设置
77 0
技术经验分享:360浏览器截图快捷键设置
|
7月前
|
Web App开发
Google Chrome 浏览器 119.0.6045.106 版本提示 STATUS_INVALID_IMAGE_HASH 崩溃
Google Chrome 浏览器 119.0.6045.106 版本提示 STATUS_INVALID_IMAGE_HASH 崩溃
167 0
|
6月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
499 0
|
7月前
|
Web App开发 前端开发 JavaScript
构建跨浏览器兼容的前端应用:技术实践与挑战
【5月更文挑战第16天】构建跨浏览器兼容的前端应用是应对浏览器差异和多样性的挑战。使用现代框架(如React、Vue)能自动转换代码,编写可移植的Web标准代码,结合浏览器兼容性测试工具和Polyfill解决旧浏览器支持问题。关注浏览器更新,应对性能、API差异和样式问题,采用渐进增强、条件判断和CSS Reset策略确保应用在各种浏览器上运行良好。
|
6月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
47 0