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



相关文章
|
7月前
|
JavaScript 前端开发 IDE
TypeScript vs. JavaScript:技术对比与核心差异解析
TypeScript 作为 JavaScript 的超集,通过静态类型系统、编译时错误检测和强大的工具链支持,显著提升代码质量与可维护性,尤其适用于中大型项目和团队协作。相较之下,JavaScript 更灵活,适合快速原型开发。本文从类型系统、错误检测、工具支持等多维度对比两者差异,并提供技术选型建议,助力开发者合理选择。
1344 1
|
7月前
|
机器学习/深度学习 人工智能 安全
F5获评WAAP领导者:以智能API安全能力重塑企业防护体系
F5获评WAAP领导者:以智能API安全能力重塑企业防护体系
102 1
存储 人工智能 安全
864 4
|
7月前
|
监控 JavaScript 前端开发
JavaScript加密与解密技术:Hook技术应用案例分析
以上案例展示了如何利用JavaScript Hook技术结合强大且广泛采纳标准化算法(如AES),无缝地集成进Web应用程序以增强通信安全性。此种方法不仅能够确保敏感信息得到有效保护,并且由于它们操作适度透明、无需重构已存在代码基础架构而具备较高实际可行性及易操作性。
297 11
|
8月前
|
机器学习/深度学习 人工智能 监控
淘宝 API 助力,天猫店铺商品上下架智能管理
在电商竞争激烈的环境下,天猫商家通过淘宝开放平台API实现商品上下架自动化,结合智能算法提升管理效率,优化库存与销售,减少人工错误,提高运营效率与市场竞争力。
315 0
|
8月前
|
机器学习/深度学习 人工智能 供应链
淘宝API智能补货系统:库存周转率提升50%的奥秘
在电商竞争激烈的当下,库存管理效率决定企业成败。淘宝API智能补货系统融合人工智能与淘宝开放接口,实现库存自动化管理,大幅提升库存周转率,降低运营成本,助力企业实现高效、智能、精益的供应链管理。
468 0
|
9月前
|
机器学习/深度学习 JSON 监控
如何通过API技术提升电商客户忠诚度:构建智能化客户关系引擎
在电商竞争激烈的当下,客户忠诚度成为核心壁垒。通过API技术构建智能化客户关系系统,整合全渠道数据,实现个性化推荐与自动化运营,提升用户黏性与复购率。结合实时行为分析、差异化定价、积分系统等手段,打造高效忠诚度管理体系,助力企业实现长期增长。
183 1
|
9月前
|
人工智能 搜索推荐 大数据
2025年电商API发展趋势:智能化与个性化
2025年,电商API在人工智能与大数据推动下加速智能化、个性化发展。从智能库存预警到情境感知推荐,技术驱动效率跃升与体验升级。预计个性化API调用占比达75%,智能决策渗透率超90%,开发成本下降60%。电商API正从“功能连接器”进化为“智能服务中枢”,重构用户体验与商业生态。
278 0
|
9月前
|
人工智能 供应链 监控
苏宁易购电商 API 接口,家电库存管理智能方案
苏宁易购推出基于API的智能家电库存管理方案,融合实时数据同步、AI预测与自动化执行,助力企业优化库存周转、降低成本,提升运营效率与客户满意度。适用于ERP/WMS系统集成,实现库存管理智能化升级。
172 0
|
10月前
|
监控 API 数据安全/隐私保护
淘宝京东价格监控API接口:构建智能价格生态的基石
淘宝和京东的价格监控API接口为品牌方、商家及第三方服务商提供了强大的数据支持,以下从接口功能、调用方式、应用场景等方面进行详细介绍

热门文章

最新文章