谷歌浏览器插件开发速成指南:弹窗

诸神缄默不语-个人CSDN博文目录

本文介绍谷歌浏览器插件开发的入门教程,阅读完本文后应该就能开发一个简单的“hello world”插件,效果是出现写有“Hello Extensions”的弹窗。
作为系列文章的第一篇,本文还希望读者阅读后能够简要了解在此基础之上进一步优化插件功能的思路。后续我将继续撰写一系列关于插件开发的教学博文,以本文为基础。

文章目录

  • 1. 前置条件
  • 2. hello world插件
    • 1. manifest.json
    • 2. 图标
    • 3. 实现弹出窗口功能:hello.html
    • 4. 在Chrome浏览器中使用插件
      • 1. 开发者模式下直接使用源代码加载
      • 2. 打包插件为crx文件
      • 3. 将插件上传到Chrome应用商店
    • 5. 插件使用效果
    • 6. 脚本标记popup.js实现在控制台输出日志
    • 7. 错误
  • 在本文撰写过程中使用到的其他参考资料

1. 前置条件

我自己用的是VSCode。
语言主要使用JavaScript和HTML,这两个语言都是不用提前安装的。我没学过开发,所以我只了解特别基础的前端知识。但是这样好啊,这样写教程的时候更加小白的我才方便理解大家的基础。

2. hello world插件

效果:在点击插件图标后,弹出写有“Hello Extensions”的弹窗。

代码见https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/tutorial.hello-world
在这里插入图片描述

manifest.json文件必须放在根目录下,其他文件随便,路径对得上号就行。

真实的2个浏览器插件开发本地代码文件夹结构示例:
在这里插入图片描述
在这里插入图片描述
接下来我将依次介绍示例项目中每个文件的功能,最后介绍插件如何打包使用。

1. manifest.json

此 JSON 文件描述了扩展程序的功能和配置。
例如,大多数清单文件包含一个 “action” 键,用于声明 Chrome 应用作扩展程序的操作图标的图片,以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML 页面。

{"manifest_version": 3,"name": "Hello Extensions","description": "Base Level Extension","version": "1.0","action": {"default_popup": "hello.html","default_icon": "hello_extensions.png"}
}

2. 图标

hello_extensions.png(manifest.json中的default_icon)
在这里插入图片描述

3. 实现弹出窗口功能:hello.html

其实只需要写这个HTML文件就可以实现弹出窗口了:

<html><body><h1>Hello Extensions</h1></body>
</html>

在GitHub中的代码还添加了脚本标记,这个见本章第6节的介绍。

4. 在Chrome浏览器中使用插件

(请确保文件已保存)

进入“扩展程序”页面的方式:
在新标签页中输入 chrome://extensions
或者,您也可以点击“扩展程序”菜单谜题按钮,然后选择菜单底部的管理扩展程序。
或者,点击 Chrome 菜单,将光标悬停在更多工具上,然后选择扩展程序。

1. 开发者模式下直接使用源代码加载

进入chrome://extensions

打开开发者模式:
在这里插入图片描述

在这里插入图片描述

选择源代码文件夹

在这里插入图片描述

更新代码后直接点击“更新”即可(有些代码更新后不用在扩展程序中更新。但是你们就先别管了,直接点更新不就得了):
在这里插入图片描述
在这里插入图片描述

在扩展程序中可以固定:
在这里插入图片描述

这样插件就能一直固定在浏览器首页了:
在这里插入图片描述

2. 打包插件为crx文件

在这里插入图片描述

在这里插入图片描述
根目录就是代码文件夹,私钥文件是第一次打包完后会生成,以后更新就填这个。

得到crx文件。这个直接拖到chrome://extensions里面就能用。

3. 将插件上传到Chrome应用商店

Chrome应用商店:https://chromewebstore.google.com/?hl=zh-CN
在这里插入图片描述

申请开发者账号这个你们应该自己能完成。总之现在我们快进到应用已经上传好了,开始更新了。
将源代码打包为zip文件,上传:
在这里插入图片描述

在这里插入图片描述

然后别的就是谷歌需要你补什么信息你就补什么就行。
隐私政策我写了个简陋版的,希望谷歌给我审核通过。如果审核通过了可资参考,如果审核没通过我应该会继续更新,总之先放这里:自动投简历工具隐私政策(2024年4月更新)

5. 插件使用效果

点击插件图标后即可出现弹窗:
在这里插入图片描述

6. 脚本标记popup.js实现在控制台输出日志

在hello.html中添加脚本标记:

<html><body><h1>Hello Extensions</h1><script src="popup.js"></script></body>
</html>

pop.js文件代码为:

console.log("This is a popup!")

这个代码的功能如下介绍,对脚本标记的更多介绍见本节末尾。这个JS代码的功能是在浏览器控制台打印日志。

浏览器控制台的打开方式是:
在弹出窗口中右键点击检查打开DevTools
在这里插入图片描述

在console中就能看到打印的日志:
在这里插入图片描述

功能原理
在HTML中,<script>标签用于定义客户端脚本,比如JavaScript。这个标签可以包含脚本语句,或者通过src属性指向外部脚本文件。在您提供的例子中,<script src="popup.js"></script>这行代码的作用是将外部的JavaScript文件(popup.js)包含到HTML页面中。这样,当页面加载时,浏览器会执行这个外部脚本文件中的JavaScript代码。

具体来说,这个脚本标记的作用包括但不限于:

  1. 动态内容:JavaScript能够动态地修改HTML内容,让网页具有交互性。通过JavaScript,开发者可以根据用户的操作来改变网页的显示内容。

  2. 客户端表单验证:在用户提交表单之前,JavaScript能够在客户端进行数据验证,确保用户输入的数据符合要求,减少服务器的压力。

  3. 与用户的交互:JavaScript可以响应用户的操作,比如点击按钮、滚动页面等,提升用户体验。

  4. 发送异步请求:使用Ajax(Asynchronous JavaScript and XML),JavaScript能够在不重新加载整个页面的情况下,与服务器交换数据和更新部分网页内容。

在您的例子中,popup.js中的代码console.log("This is a popup!")将在浏览器的控制台中打印出一条消息,这是一个简单的JavaScript操作,通常用于调试目的。在开发浏览器扩展或网页时,通过在控制台打印消息,开发者可以检查变量的值、追踪代码执行流程等,帮助调试和理解代码执行情况。

7. 错误

如果出现了代码错误,在扩展程序中就会出现一个“错误”:
在这里插入图片描述

点击可查看更多详细信息

在本文撰写过程中使用到的其他参考资料

  1. 本文主要参考的教程:官方文档:https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=zh-cn
  2. 官方插件开发文档:https://developer.chrome.com/docs/extensions/
  3. 扩展程序 / 示例 | Extensions | Chrome for Developers:对每个函数和权限都给出了示例
  4. Web API 接口参考 | MDN
  5. 扩展程序 / 工具书 | Reference | Chrome for Developers:Chrome Extension API 文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/800235.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电影特效渲染为什么费时间?「瑞云渲染」

影视特效渲染过程通常耗时且资源密集&#xff0c;因为它涉及处理复杂的视觉元素和光影效果。瑞云渲染通过云技术提供解决方案&#xff0c;加快渲染速度并降低成本。简而言之&#xff0c;电影特效渲染之所以费时&#xff0c;是因为其对计算机资源的高需求。 电影特效渲染费时间原…

LangChain - 文本嵌入

文章目录 一、关于 文本嵌入模型二、入门1、设置 OpenAI2、embed_documents3、embed_query 三、集成示例1、DashScope2、OpenAI3、Hugging Face Hub4、Fake Embeddings 本文转载改编自&#xff1a; https://python.langchain.com.cn/docs/modules/data_connection/text_embeddi…

Java对象转型

&#xff08;一&#xff09;向上转型 向上转型&#xff08;自动转型&#xff09;&#xff0c;指子类类型转父类类型 //父类 public class Father {public String fatherAttr "父类属性";public void fatherMethod(){System.out.println("父类成员方法")…

1077:统计满足条件的4位数

1077&#xff1a;统计满足条件的4位数 时间限制: 1000 ms 内存限制: 65536 KB 提交数:79300 通过数: 54638 【题目描述】 给定若干个四位数&#xff0c;求出其中满足以下条件的数的个数&#xff1a;个位数上的数字减去千位数上的数字&#xff0c;再减去百位数上的数…

2024.3.29力扣每日一题——元素和最小的山形三元组1

2024.3.29 题目来源我的题解方法一 暴力解法方法二 规律 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2908 我的题解 方法一 暴力解法 使用三层循环&#xff0c;分别控制左边界、峰值、右边界&#xff0c;依次遍历。 时间复杂度&#xff1a;O( n 3 n^3 n3) 空间复杂度…

Redis的三种部署方案

文章目录 单机模式主从复制哨兵模式分片集群 在Redis中提供的集群方案总共有三种&#xff1a;单机模式&#xff0c;主从复制集群、哨兵模式&#xff0c;Redis分片集群 单机模式 Redis 只运行在一台服务器上&#xff0c;并且所有的数据都存储在这一台服务器的内存中。 主从复制…

MYSQL数据库故障排除与优化

目录 MySQL 单实例故障排查 MySQL 主从故障排查 MySQL 优化 MySQL 单实例故障排查 故障现象 1 ERROR 2002 (HY000): Cant connect to local MySQL server through socket /data/mysql/mysql.sock (2) 问题分析&#xff1a;以上这种情况一般都…

80V输入1.5A,DC/DC高效率降压型电源芯片--ZCC2480

产品概述&#xff1a; ZCC2480 是一款内部集成有功率 MOSFET 管的降压型开关稳压器。以电流模式控制方式达到快速 环路响应并提高环路的稳定性。宽范围输入电压&#xff08; 4.5 V 至 80V &#xff09;提供最大 1.5A 电流的高效率输出&#xff0c; 可在移动环境输入的条件下实现…

Java编程规范及最佳实践

文章目录 一、命名规范二、代码风格规范三、注释规范四、推荐的编程实践五、类和接口六、异常处理七、可见性八、并发九、代码复用十、代码组织和模块化十一、Java集合框架十二、输入验证十三、资源管理十四、文档和注释十五、测试和代码质量十六、代码可读性十七、性能优化十八…

Django之REST Client插件

一、接口测试工具介绍 在开发前后端分离项目时,无论是开发后端,还是前端,基本都是需要测试API接口的内容,而目前我们需要开发遵循RESTFul规范的项目,也是必然的(自己不开发前端页面)。 在网上有很多这样的工具,常用的postman,但还是需要下载安装。在这我们介绍一个VSCod…

[C++][C++类型转换]详解

目录 1.C语言中的类型转换2.为什么C需要四种类型转换&#xff1f;3.C强制类型转换1.static_cast2.reinterpret_case3.const_cast4.dynamic_cast 4.RTTI(了解) 1.C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&…

【小白学机器学习12】假设检验之3:t 检验 (t检验量,t分布,查t值表等)

目录 1 t 检验的定义 1.1 来自维基百科和百度百科 1.2 别名 1.3 和其他检验的区别 2 适用情况&#xff1a; 2.1 关于样本情况 2.2 适合检查的情况 2.2.1 单样本均值检验&#xff08;One-sample t-test&#xff09; 2.2.2 两独立样本均值检验&#xff08;Independent …

2024.4.6力扣每日一题——树节点的第 K 个祖先

2024.4.6 题目来源我的题解方法一 哈希表 超内存方法二 树上倍增 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1483 我的题解 方法一 哈希表 超内存 使用一个哈希表存储每个节点的祖先节点。 时间复杂度&#xff1a;O(n) 空间复杂度&#xff1a;O( n 2 n^2 n2) class…

hydra九头蛇

一、hydra简介 Hydra是一款非常强大的暴力破解工具&#xff0c;它是由著名的黑客组织THC开发的一款开源暴力破解工具。Hydra是一个验证性质的工具&#xff0c;主要目的是&#xff1a;展示安全研究人员从远程获取一个系统认证权限。 目前该工具支持以下协议的爆破&#xff1a; A…

2024年华为OD机试真题-启动多任务排序-Java-OD统一考试(C卷)

题目描述: 一个应用启动时,会有多个初始化任务需要执行,并且任务之间有依赖关系,例如A任务依赖B任务,那么必须在B任务执行完成之后,才能开始执行A任务。 现在给出多条任务依赖关系的规则,请输入任务的顺序执行序列,规则采用贪婪策略,即一个任务如果没有依赖的任务,则…

蓝桥杯小白入门赛第9场第4题 字典树考试

问题描述 蓝桥学院最近教学了字典树这一数据结构,小蓝是全班的第一名,他不仅掌握了普通字典树,还自学了 01 字典树的使用。为了展示自己的能力,他向全班同学出了以下问题: 给定一个长度为 N N N 的数组 A A A , 你能否求出表达式 ∑ i = 1 N ∑ j = i + 1 N f ( A i …

【网站项目】农业信息管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

基于STM32f103芯片的应用程序在线升级功能框架的实现

目录 基于STM32f103芯片的应用程序在线升级功能框架的实现 一、原理简介 二、KEIL软件主要设置 三、应用程序app部分 四、Bootloader部分 五、补充部分 基于STM32f103芯片的应用程序在线升级功能框架的实现 一、原理简介 我们在使用stm32的过程中&#xff0c;如果需要对…

[C#]OpenCvSharp改变图像的对比度和亮度

目的 访问像素值mat.At<T>(y,x) 用0初始化矩阵Mat.Zeros 饱和操作SaturateCast.ToByte 亮度和对比度调整 g(x)αf(x)β 用α(>0)和β一般称作增益(gain)和偏置(bias)&#xff0c;分别控制对比度和亮度 把f(x)看成源图像像素&#xff0c;把g(x)看成输出图像像素…

Spring Boot集成Spring Retry快速入门Demo

1.Retry介绍 Spring Retry 提供了自动重新调用失败的操作的功能。这在错误可能是暂时的&#xff08;例如瞬时网络故障&#xff09;的情况下很有用。从2.2.0版本开始&#xff0c;重试功能已从Spring Batch中撤出&#xff0c;成为一个独立的新库&#xff1a;Spring Retry 使用场景…