写点什么

我是如何开发和部署一个 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:379329

评论

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

量纲分析(Dimensional Analysis)入门

InfoQ_b5c13aa54782

数学 基础 物理 量纲分析 电磁

STM32-ADC简单学习笔记

 

简单交互式页面的思考(C)

Alex

指针 C语言 交互设计

Dell G7 指纹识别设备 - Goodix fingerprint 失效官方解决办法(图文)

Saint_X

硬件

免费开源看板软件Wekan安装与使用记录

emuqi

Docker 效率工具 wekan 看板 任务管理

随手记

InfoQ_0d79a8bcf933

数据结构与算法

局域网文件共享

冰糖雪梨多冰少糖

局域网共享 iPad air3 文件传输

企业品尝新基建的美酒前,需要名为NetEngine 8000的酒杯

脑极体

区块链政策区域特征分明 产业园区渐成聚集效应

CECBC

区块链 新基建

Python中的bytes、str以及unicode区别

wangkx

Python Python PEP

别人家的 DevOps 流水线,价值一个亿

Atlassian

DevOps 数字化转型 金融 Jira 数字银行

用python给女朋友做一个歌曲词云图

我是程序员小贱

辗转相除法求最大公约数(C语言实现)

InfoQ_3f366696ed0c

C语言

全站加速在互联网媒体应用上的最佳实践

阿里云Edge Plus

CDN

CentOS7 开启3306端口

暴躁小李K

Centos 7 Firewalld防火墙 Liunx

为什么考研,考研能给你带来什么?说说我的感受!

我是程序员小贱

Apache Pulsar 社区周报:08-08 ~ 08-14

Apache Pulsar

Apache Apache Pulsar 消息系统

数据库快速迁移10亿级数据

架构师修行之路

高并发系统设计 数据库优化

写作只是消遣?

Geek_db1689

写作 讨论写作 自我感悟 瞎想乱写

Android |《看完不忘系列》之Retrofit

哈利迪

android

DB-Engines 8 月数据库排名:Redis悄悄拔高,猛超Elasticsearch

华章IT

MySQL 数据库 redis Clickhouse SQL优化

兄弟,不要偷看人家摄像头

我是程序员小贱

特性预览:Apache 顶级项目 Apache Pulsar 2.6.1 版本即将发布

Apache Pulsar

Apache Apache Pulsar 消息系统

低/零代码干掉了传统的开发模式

代码制造者

编程语言 低代码 零代码 信息化 编程开发

区块链在新冠病毒爆发中将加速发展

CECBC

区块链技术 供应链 食品追溯

firewalld 常用指令

wong

Firewalld

自从有了语音开黑小能手,队友再也不会骂我了!

anyRTC开发者

WebRTC 在线教育 直播 RTC RTMP

集成学习方法及应用,破解AI实践难题

博文视点Broadview

人工智能 学习 AI 周志华

谈一谈Kuberflow

soolaugust

tensorflow 学习 kubeflow Kubernetes 云原生

小白程序员成长之路-准备篇

Mr.Cactus

盲打练习 在线打字

架构设计篇之云计算服务设计与决策

小诚信驿站

云计算 刘晓成 企业架构和云服务 SaaS/IaaS/PaaS

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