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

相关文章
|
4月前
|
前端开发 搜索推荐 开发工具
通义灵码与颜色板生成器,为前端开发提供智能配色解决方案
在前端开发中,色彩搭配对用户体验和界面美观至关重要。通义灵码提供的颜色板生成器通过自动推荐配色方案、随机生成颜色组合及支持自定义调整,帮助开发者高效完成配色任务。该工具支持一键导出为 CSS 样式表,并提供简洁的中文指令交互方式,大大提升开发效率,助力开发者打造美观和谐的用户界面。
|
2月前
|
人工智能 前端开发 JavaScript
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
529 18
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
|
7月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
481 70
|
5月前
|
数据采集 Web App开发 JavaScript
无头浏览器技术:Python爬虫如何精准模拟搜索点击
无头浏览器技术:Python爬虫如何精准模拟搜索点击
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
11月前
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
6044 68
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
8月前
|
数据采集 存储 运维
无头浏览器与请求签名技术
本文分享了在面对Cloudflare防护(如Amazon网站)时,如何通过无头浏览器、请求签名技术和爬虫代理IP实现数据采集的故障排查与改进方案。首先,介绍了从常规请求失败到引入Selenium无头浏览器的过程,解决了Cookie和User-Agent检测问题。接着,通过生成请求签名绕过二次验证,并利用代理IP规避访问风险。最后,提出了架构改进方案,包括无头浏览器集群化、签名算法优化、代理池管理和多层次容错机制,以提高系统的稳定性和扩展性。示例代码展示了如何设置代理、获取Cookie并生成签名,成功采集商品信息。
238 6
无头浏览器与请求签名技术
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
1015 29
|
12月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
263 6
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。

推荐镜像

更多