《智能前端技术与实践》——第 2 章 前端开发基础 ——2.5 与 Google 扩展程序相关的 JavaScript API

简介: 《智能前端技术与实践》——第 2 章 前端开发基础 ——2.5 与 Google 扩展程序相关的 JavaScript API

2.5 与 Google 扩展程序相关的 JavaScript API


Google Chrome 为扩展程序提供了许多专用 API,如 chrome.runtime 和 chrome.alarms。 chrome.*API 中的方法通常是异步的,调用后会立即返回结果而不需要等待操作完成,所以对 chrome.*API 的调用往往需要以一个回调函数作为参数以处理调用结果。当然,也有少量 chrome.*API 是同步调用的,这样的 chrome.*API 往往有一个返回类型,也无须使用回调函数 作为参数。


我们一般将 Chrome 提供的 API 分为稳定的 API(stable API)、测试版的 API(beta API), 以及开发中的 API(dev API)。本节将介绍与 Google 扩展程序相关的 JavaScript API。


1.chrome.browserAction


该 API 会将图标(icon)放在 Google Chrome 主工具栏的右侧,如图 2-24 所示。除图标之外, 还会有工具提示(tooltip)、徽章(badge)和弹出窗口。这些可以通过 getBadgeBackgroundColor()、 getBadgeText()、getPopup()、getTitle()等方法进行修改。在使用 chrome.browserAction 前,我们需 要在 manifest 文件中声明,如代码清单 2-19 所示。


代码清单 2-19


{
"name": "My extension",
..."browser_action": {
..."default_icon": "images/icon32.png"// optional// 等价于 "default_icon": { "32": "images/icon32.png" }},
...}

接下来,我们重点看一下如何监听扩展程序图标的 OnClicked 事件。OnClicked 事件的介绍如 图 2-25 所示。


addListener()方法以一个函数作为参数,用来处理当单击图标时需要完成的逻辑功能,比 如弹出界面等。


image.png


2.chrome.windows


使用该 API 可以与浏览器窗口交互,我们可以通过该 API 在浏览器中创建、修改或重新 排列窗口。在使用该 API 之前,我们需要在 manifest 文件中声明,如代码清单 2-20 所示。


代码清单 2-20


{
"name": "My extension",
..."permissions": ["tabs"],
...}

接着,我们看 windows.create()方法的介绍,如图 2-26 所示。


image.png


该方法有如下两个参数。

• createData:表示新窗口的配置对象,可以通过该参数设置新窗口的大小、位置、类 型、地址等,详情请参考表 2-6。

• callback:表示新窗口要执行的回调函数。


image.png


3.chrome.notifications

使用该 API 可以创建提示用户的浏览器通知,如图 2-27 所示。


image.png

图2-27 浏览器通知


在使用该 API 前,需要在 manifest 文件中声明,如代码清单 2-21 所示。


代码清单 2-21


{
"name": "My extension",
..."permissions": ["notifications"],
...}

notifications.create()方法的介绍如图 2-28 所示。


该方法有如下 3 个参数。

• notificationId:用来标记不同的浏览器通知,如果没有指定该参数的值,会自动生成 一个 ID,为可选参数。

• options:表示浏览器通知的配置项,详情请参考表 2-7。

• callback:表示创建浏览器通知后要执行的回调函数。


image.png


表 2-7 options 参数的值

image.png



相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
57 1
|
23天前
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
733 66
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
6天前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
73 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
2月前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
52 12
|
2月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
52 6
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
2月前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!