写点什么

我是如何开发和部署一个 Chrome 扩展程序的

  • 2022-09-30
    北京
  • 本文字数:1766 字

    阅读完需:约 6 分钟

我是如何开发和部署一个Chrome扩展程序的

毫无疑问,Chrome 是世界上使用范围最广的浏览器。它以出色的性能、实用的开发工具和丰富的扩展而闻名。

 

当前,Chrome Web 商店中有 14 万个扩展,其中许多已经为开发人员带来了可观的收入。

 

虽然开发和部署自己的扩展可能听上去比较麻烦,但我将向你展示那有多么简单。

 

本文将介绍我自己创建和推出第一个 Chrome 扩展的整个过程。

 

只要你对 HTML、JavaScript 有一些基本的了解,就可以按本文介绍的内容进行操作,因为我会介绍这个过程的每个细节。

 

让我们开始吧!

提出一个创意


要创建扩展,第一个重要的步骤是提出一个创意。

 

我的创意是创建一个扩展,利用谷歌搜索技巧帮助人们更轻松地在谷歌上查找信息。

 

例如,你可以使用关键字site 指定查询结果的来源站点。



如你所见,当我在搜索关键词中加入site:medium.com 时,所有的结果都来自 Medium。我的扩展将提供一个输入界面,省去记忆这些关键字的麻烦。

 

剧透预警!以下是我的扩展提供的界面:



在输入所需字段并点击“搜索”后,它将打开一个新页签,而搜索查询会包含所有关键字。

 

这就是我的创意。现在,让我们继续看下技术实现。

创建 Manifest.json 文件


Manifest.json 是扩展最重要的部分。它把有关扩展功能和元数据的信息提供给浏览器。

 

因此,提供正确的manifest.json 文件数据至关重要,否则,浏览器将无法得知扩展如何工作。

 

manifest.json 文件中有许多字段,但只有manifest_versionnameversion 是必须的。这里有一个 manifest 文件,感兴趣的读者可以看一下。

 

下面是我的manifest.json 文件:



以下是每个属性的简单介绍:


  • manifest_version:扩展的 manifest 版本。我建议使用版本 3,因为版本 2 谷歌很快就不支持了。

  • name:扩展名称。

  • description:扩展介绍。

  • version:扩展版本。谷歌建议初始发布时使用一个小点的版本号,并随着时间推移逐步增大。

  • action/default_popup:定义点击扩展时将打开哪个模态窗口。在这个例子中,我创建了一个popup.html文件作为默认模态窗口(稍后会有详细介绍)。

  • icons:扩展的图标。 谷歌建议使用 3 种图标尺寸,用于在不同的场景下显示扩展:16x16 用于收藏夹、48x48 用于扩展管理页、128x128 用于 Chrome Web 商店。



我为扩展制作的图标

 

根据项目,manifest.json 文件可能会复杂得多。不过,对于我的扩展,这就够了。尽量简单!

将扩展加载到浏览器


在创建好manifest.json 文件后,下一步是将扩展连接到浏览器。

 

进入扩展管理页->保证已开启开发者模式->点击“加载已解压的扩展程序”。



然后,选择包含manifest.json 文件的项目文件夹。



之后,在扩展管理页上就可以看到新添加的扩展了。



我建议将扩展固定到工具栏,那样变更测试会简单些。



现在,让我们继续看下功能实现部分的代码。

 

创建弹出模态窗口(HTML)


从上面介绍的manifest.json 文件中可以看到,default_popup 指向popup.html 文件。该文件包含弹出界面的HTML 代码。

 

popup.html文件内容如下所示:



上图展示了每个输入元素在 HTML 中是如何编码的。为了节省时间,样式使用了Bootstrap

 

这里需要重点注意的是每个元素都有一个 id。我们将使用这些 id 来获取元素的数据,在点击按钮时执行搜索动作。

 

那也是我们接下来要介绍的内容,获取输入值,执行搜索动作。

编写弹出逻辑(JavaScript)


我的扩展逻辑相当简单。它将根据输入值生成搜索查询。

 

例如,如果搜索值是“how to make money”,而结果来自“medium.com”,那么搜索查询将是“how to make money site:medium.com”



下面是代码:



如你所见,我将输入值串联起来生成最终的搜索查询。在生成最终的搜索关键词后,打开一个包含该查询的新页签。

 

逻辑就这些。最后一步是将扩展发布到 Chrome Web 商店。

发布扩展


为了将扩展发布到 Chrome Web 商店,我们需要注册一个开发者账号,并一次性支付 5 美元的注册费。



然后,进入“开发人员面板(Developer Dashboard)”,点击“新建项(New Item)”,创建一个新扩展。



接下来,需要填写有关扩展的信息,如描述、类别等。



当一切准备就绪,只需点击提交进行扩展发布审核。



谷歌审核大概需要 1 到 2 天。审核通过后,就可以通过商店安装了。



经过一段时间的等待,我的扩展审批通过并公开发布了(试用)。

 

本文要介绍的内容就这些,希望对你有所帮助。感谢阅读!


原文链接:

 

https://medium.com/geekculture/how-i-build-and-publish-a-chrome-extension-e8fe37c0f578

 

2022-09-30 09:379151

评论

发布
暂无评论
发现更多内容

一文详解从云计算到 Serverless

Serverless Devs

云计算 Serverless

万圣节也是节,准备好Trick or Treat了么?

气气

话题讨论

企业级开发工具,J2PaaS低代码平台核心能力解析!

J2PaaS低代码平台

软件开发 低代码 低代码开发 低代码平台

网易云音乐音视频算法的 Serverless 探索之路

阿里巴巴中间件

云计算 阿里云 Serverless 云原生 中间件

给JSONObject添加自定义遍历方法

FunTester

单元测试 Fastjson JSON库 spock FunTester

Serverless 工程实践 | 零基础上手 Knative 应用

Serverless Devs

Redis核心原理与实践--Redis启动过程源码分析

binecy

redis 源码阅读

[2021年新鲜出炉]K8s工程师资料合辑,书籍推荐,面试题,精选文章,开源项目,PPT,视频,大厂资料

奔着腾讯去

golang Docker Kubernetes 容器 云原生

先行一步,7 大技术创新和突破,阿里云把 Serverless 领域的这些难题都给解了

Serverless Devs

阿里云 gpu VPC 函数计算

直面Z级计算挑战,英特尔携手生态合作伙伴加速开发者工具和软件部署

科技新消息

英特尔全面升级开发者专区(Developer Zone),携手开发者共塑科技未来

科技新消息

英特尔On技术创新峰会公布开发者重点投入计划,全面赋能开发者

科技新消息

第 24 章 -《Linux 一学就会》- shell中色彩处理和awk使用技巧

学神来啦

Linux linux运维 linux云计算 linux一学就会

打破 Serverless 落地边界,阿里云 SAE 发布 5 大新特性

Serverless Devs

阿里云 Serverless 函数计算

架构实战营毕业总结

maybe

【IT运维小知识】安全组是什么意思?

行云管家

网络安全 安全 数据安全 安全组 IT运维

医药研发企业数据中台的选择

鲸品堂

产业互联网

官方线索 | 阿里云1024程序员创造营

穿过生命散发芬芳

1024我在现场

阿里最新春招面经,腾讯/美团/字节1万道Java中高级面试题

收到请回复

Java 程序员 面试 职场 后端

阿里二面:为什么要分库分表?

Java MySQL 数据库 架构 面试

如何赋能APaaS平台应用管理员

明道云

堪称神级的Spring Boot手册,从基础入门到实战进阶

Java 程序员 Spring Boot

云原生体系下 Serverless 弹性探索与实践

Serverless Devs

云原生 无服务器 弹性计算

Linux指令日志分析(一)

正向成长

日志分析

iOS 崩溃日志在线符号化实践

百度Geek说

用建造者模式实现一个防SQL注入的ORM框架

Tom弹架构

三轮融资笔笔过亿,来画如何实现弯道超车?

ToB行业头条

瑜伽CRM系统使老师再也不用教学分心

低代码小观

CRM 管理工具 CRM系统 瑜伽 瑜伽馆管理

安全漏洞的复现与总结

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 漏洞挖掘

递推算法与递推套路(手撕算法篇)

有道技术团队

学习 编程 算法

网易云音乐音视频算法的 Serverless 探索之路

Serverless Devs

阿里云 Serverless 算法 音视频

我是如何开发和部署一个Chrome扩展程序的_大前端_Viet Nguyen_InfoQ精选文章