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



相关文章
|
9月前
|
JSON API 数据格式
亚马逊商品评论API接口技术指南
亚马逊商品评论API可程序化获取指定ASIN商品的用户评价,包含评分、内容、时间等结构化数据。需企业认证并遵守使用协议,日调用上限500次。支持分页与排序查询,适用于竞品分析、口碑监测等场景,结合SP-API可构建完整电商数据方案。(238字)
|
9月前
|
JSON 缓存 算法
如何通过API获取1688商品类目数据:技术实现指南
1688开放平台提供alibaba.category.get接口,支持获取全量商品类目树。RESTful架构,返回JSON数据,含类目ID、名称、层级等信息。需注册账号、创建应用并授权。请求需签名认证,QPS限10次,建议缓存更新周期≥24小时。
|
10月前
|
JSON 缓存 自然语言处理
多语言实时数据微店商品详情API:技术实现与JSON数据解析指南
通过以上技术实现与解析指南,开发者可高效构建支持多语言的实时商品详情系统,满足全球化电商场景需求。
|
9月前
|
JSON 算法 API
1688比价API接口:实现商品价格高效比较的技术指南
本文介绍1688比价API的核心功能与实战应用,涵盖接口调用、Python代码实现及价格比较算法优化。助您快速集成商品比价功能,提升电商开发效率。
1264 3
|
9月前
|
JSON 安全 API
淘宝天猫上货API接口技术指南
本文介绍淘宝天猫上货API,详解其RESTful接口原理、认证流程及Python调用示例。涵盖商品添加、签名生成、响应处理,并提供代码实现与最佳实践,助力开发者高效实现自动化批量上架。
|
9月前
|
JSON 搜索推荐 API
拼多多商品详情API技术指南
拼多多商品详情API(pdd.goods.detail.get)支持通过商品ID获取商品标题、价格、销量、图片、库存及评价等详细信息,适用于电商数据分析、竞品监控与价格策略优化,返回标准JSON格式,便于集成开发。
1234 1
|
9月前
|
缓存 数据可视化 定位技术
快递鸟快递API技术指南:获取物流轨迹信息与轨迹地图的解决方案
在当今电商竞争激烈的环境中,物流体验已成为提升用户满意度的关键因素。研究表明,超过 75% 的消费者会因物流信息不透明而放弃下单。
1955 1
|
9月前
|
JSON 安全 API
1688批量上货API接口技术指南
本文介绍1688批量上货API的集成与使用,涵盖认证、请求构建及错误处理。通过Python示例代码,助您实现商品信息批量上传,提升电商运营效率。
|
9月前
|
存储 缓存 算法
淘宝买家秀 API 深度开发:多模态内容解析与合规推荐技术拆解
本文详解淘宝买家秀接口(taobao.reviews.get)的合规调用、数据标准化与智能推荐全链路方案。涵盖权限申请、多模态数据清洗、情感分析、混合推荐模型及缓存优化,助力开发者提升审核效率60%、商品转化率增长28%,实现UGC数据高效变现。
|
10月前
|
供应链 安全 API
唯品会:利用银行转账API实现企业采购对公支付的技术实践
企业采购支付面临合规、效率与对账难题。唯品会通过银行API实现银企直连,构建安全高效对公支付系统,支持ISO 20022标准与多重风控,支付耗时从72小时降至90秒,错误率下降98%,推动供应链数字化升级。(236字)

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1229
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    550
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    426
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    422
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    538
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    714
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1366
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    307
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1145
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    494
  • 推荐镜像

    更多