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

诸神缄默不语-个人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.hqwc.cn/news/600186.html

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

相关文章

由 LDO 稳压器 CAT6219-330TDGT3提供快速响应时间，快速启动 实现高效率解决方案

由 LDO 稳压器 CAT6219-330TDGT3提供快速响应时间，快速启动 实现高效率解决方案

CAT6219-330TDGT3是一款 500 mA CMOS 低漏稳压器&#xff0c;在负载电流和线路电压变化期间提供快速响应时间。 快速启动特性允许使用外部旁通电容器&#xff0c;可降低总体输出噪声&#xff0c;而不会影响仅为 150 s 的导通时间。 零关断电流和 55 A 的低静止电流典型值使其适…
阅读更多...
【随笔】Git 高级篇 -- 整理提交记录（下）rebase（十六）

【随笔】Git 高级篇 -- 整理提交记录（下）rebase（十六）

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…
阅读更多...
JavaScript(二)-Web APIS

JavaScript(二)-Web APIS

文章目录 Web API 基本认知作用和分类什么是DOMDOM树DOM对象获取DOM对象操作元素内容操作元素属性操作元素常用属性操作元素样式属性自定义属性 定时器-间歇函数定时器函数的理解定时器函数使用间歇函数 事件监听与绑定事件监听事件监听版本事件类型事件对象什么是事件对象获取…
阅读更多...
搭建Zookeeper集群：三台服务器，一场分布式之舞

搭建Zookeeper集群：三台服务器，一场分布式之舞

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 搭建Zookeeper集群&#xff1a;三台服务器&#xff0c;一场分布式之舞 前言前置设置主机名对应关系要有java环境 步骤1. 下载和解压 ZooKeeper&#xff1a;2. 配置 ZooKeeper&#xff1a;3. 配置集群节…
阅读更多...
健康元 穿越周期看底色

健康元 穿越周期看底色

中国创新药正在迈进2.0时代。 进入2024年之后&#xff0c;越来越多的国内创新药企开始主动调整研发管线&#xff0c;缩减研发开支&#xff0c;甚至是直接被“溢出”了市场。 在“风向标”的融资端&#xff0c;过去的2023年也是中国创新药融资市场连续第二年出现一二级市场融资…
阅读更多...
LabVIEW数控磨床振动分析及监控系统

LabVIEW数控磨床振动分析及监控系统

LabVIEW数控磨床振动分析及监控系统 在现代精密加工中&#xff0c;数控磨床作为关键设备之一&#xff0c;其加工质量直接影响到产品的精度与性能。然而&#xff0c;磨削过程中的振动是影响加工质量的主要因素之一&#xff0c;不仅会导致工件表面质量下降&#xff0c;还可能缩短…
阅读更多...
达梦备份与恢复

达梦备份与恢复

达梦备份与恢复 基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…
阅读更多...
222，完全二叉树的节点数

222，完全二叉树的节点数

给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最左边的若干位置。若最…
阅读更多...
文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《考虑灵活爬坡产品的虚拟电厂两阶段分布鲁棒优化运营策略》

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《考虑灵活爬坡产品的虚拟电厂两阶段分布鲁棒优化运营策略》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
conda创建虚拟环境太慢，Collecting package metadata (current_repodata.json): failed

conda创建虚拟环境太慢，Collecting package metadata (current_repodata.json): failed

(省流版&#xff1a;只看加粗红色&#xff0c;末尾也有哦) 平时不怎么用conda&#xff0c;在前公司用服务器的时候用的是公司的conda源&#xff0c;在自己电脑上直接用python创建虚拟环境完事儿&#xff0c;所以对conda的配置并不熟悉~~【狗头】。但是python虚拟环境的最大缺点…
阅读更多...
企业IT运维事中故障定位方法及工具

企业IT运维事中故障定位方法及工具

企业IT故障定位指诊断故障直接原因或根因&#xff0c;故障定位有助于故障恢复动作更加有效。故障定位通常是整个故障过程中耗时最长的环节&#xff0c;定位的目标围绕在快速恢复的基础上&#xff0c;而非寻找问题根因&#xff0c;后者由问题管理负责。通常大部分可用性故障&…
阅读更多...
解决 VSCode 编辑器点击【在集成终端中打开】出现新的弹框

解决 VSCode 编辑器点击【在集成终端中打开】出现新的弹框

1、问题描述 在 VSCode 的项目下&#xff0c;鼠标右键&#xff0c;点击【在集成终端中打开】&#xff0c;出现新的一个弹框。新版的 VSCode 会有这个问题&#xff0c;一般来说我们都希望终端是在 VSCode 的控制台中打开的&#xff0c;那么如何关闭这个弹框呢&#xff1f; 2、解…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023