《智能前端技术与实践》——第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

相关文章
|
2月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
19天前
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
581 66
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
2月前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
225 29
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
50 6
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
62 5
|
2月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
44 3
|
2月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
2月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
52 3
|
2月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
66 4
下一篇
开通oss服务