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

目录
打赏
0
0
0
0
308
分享
相关文章
Google 浏览器中的 AI 魔法 — window.ai
本文介绍了如何在 Chrome Canary 中启用并使用设备端 AI 功能。通过下载 Chrome Canary 并启用相关 API,你可以在本地运行 AI 模型,无需互联网连接。文章详细讲解了设置步骤、确认 AI 可用性的方法以及如何使用 `window.ai` 进行文本会话。虽然目前的性能和功能还有待提升,但这一技术为未来的前端开发和智能应用提供了无限可能。
209 0
|
6月前
|
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
541 1
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
600 0
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
88 0
|
8月前
技术经验分享:360浏览器截图快捷键设置
技术经验分享:360浏览器截图快捷键设置
110 0
技术经验分享:360浏览器截图快捷键设置
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
63 0
浏览器推荐:从技术与体验角度的深入探讨
浏览器推荐:从技术与体验角度的深入探讨
221 0
构建跨浏览器兼容的前端应用:技术实践与挑战
【5月更文挑战第16天】构建跨浏览器兼容的前端应用是应对浏览器差异和多样性的挑战。使用现代框架(如React、Vue)能自动转换代码,编写可移植的Web标准代码,结合浏览器兼容性测试工具和Polyfill解决旧浏览器支持问题。关注浏览器更新,应对性能、API差异和样式问题,采用渐进增强、条件判断和CSS Reset策略确保应用在各种浏览器上运行良好。
|
9月前
|
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
399 0

热门文章

最新文章

  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    64
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    29
  • 5
    巧用通义灵码,提升前端研发效率
    94
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    147
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    40
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    129
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等