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

诸神缄默不语-个人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 文档

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

爬取日本常用汉字秘籍

爬取日本常用汉字秘籍

前言 昨天投简历时遇到了这样的一个笔试。本以为会是数据结构算法之类的没想到直接发了一个word直接提需求&#xff0c;感觉挺有意思就写了这篇文章&#xff0c;感兴趣的朋友可以看看。 1. 网页内容解析 首先&#xff0c;我们通过请求网页获取到日本常用汉字的链接列表。然后…
阅读更多...
计算机网络——38报文完整性

计算机网络——38报文完整性

报文完整性 数字签名 数字签名类比于手写签名 发送方数字签署了文件&#xff0c;前提是他是文件的拥有者/创建者可验证性&#xff0c;不可伪造性&#xff0c;不可抵赖性 谁签署&#xff0c;接收方可以向他人证明是他&#xff0c;而不是其他人签署了这个文件签署了什么&#…
阅读更多...
Web攻击越发复杂，企业如何保护云上业务

Web攻击越发复杂，企业如何保护云上业务

如今&#xff0c;电子政务、电子商务、网上银行、网上营业厅等依托Web应用&#xff0c;为广大用户提供灵活多样的服务。在这之中&#xff0c;流量攻击堪称是Web应用的最大敌人&#xff0c;黑客通过流量攻击获取利益、竞争对手雇佣黑客发起恶意攻击、不法分子通过流量攻击瘫痪目…
阅读更多...
ShardingSphere-JDBC使用时出现雪花算法id无法生成

ShardingSphere-JDBC使用时出现雪花算法id无法生成

出现报错&#xff1a; 这是sql 尝试1&#xff1a; 这里改成Long 还是报错 尝试2&#xff1a;将配置重写 删除 props: # 主键生成器属性配置worker-id: 1 # Snowflake算法中的workerId配置解决&#xff01;
阅读更多...
基于Difussion图像、视频生成综述

基于Difussion图像、视频生成综述

2024年大年初七&#xff08;02.16&#xff09;OpenAI 发布视频生成模型 Sora 在各大平台转疯了&#xff0c;和2022年发布ChatGPT3.5时一样的疯狂。在开工第一天&#xff0c;我就去官网上看了 Sora 的技术报告&#xff0c;遗憾的是&#xff0c;在这份技术报告中只披露了一些模型…
阅读更多...
苹果证书分类及作用详解，助力开发者高效管理应用程序

苹果证书分类及作用详解，助力开发者高效管理应用程序

转载&#xff1a;苹果证书的作用及分类详解 摘要&#xff1a;本文将详细介绍苹果证书的作用及分类&#xff0c;包括企业证书、开发者证书、 推送证书、分发证书和MDM证书&#xff0c;帮助开发者了解如何正确使用和管理这些证书&#xff0c; 提升应用程序的开发和发布效率。 引…
阅读更多...
基于SSM的校园二手物品交易平台论文

基于SSM的校园二手物品交易平台论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本校园二手物品交易平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…
阅读更多...
基于单片机分舱式电开水炉位控制系统

基于单片机分舱式电开水炉位控制系统

**单片机设计介绍&#xff0c;基于单片机分舱式电开水炉位控制系统 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机分舱式电开水炉位控制系统概要主要涉及通过单片机对电开水炉的各个舱位进行精确控制&#xff0c;实现水位、温度…
阅读更多...
C++中的指针：其重要性与应用深度解析

C++中的指针：其重要性与应用深度解析

在C编程语言的世界中&#xff0c;指针无疑是一个至关重要的概念。它不仅是C语言的核心特性之一&#xff0c;更是实现高效、灵活编程的关键工具。理解并熟练掌握指针的使用&#xff0c;对于提升程序设计能力、优化代码性能以及深入理解计算机内存模型具有不可估量的价值。 为了帮…
阅读更多...
HarmonyOS 应用开发-ArkUI（ets）仿“腾讯新闻”APP

HarmonyOS 应用开发-ArkUI（ets）仿“腾讯新闻”APP

一、效果演示 1、新闻列表页 2、新闻详情页、图片展示页 3、视频页 4、动态页 二、 流程图 –本来自定义了视频的控制栏的&#xff0c;但是发现VideoController()控制器的bug会导致控制器失效&#xff0c;所以没继续做。视频页先不搞了。 三、文件组织&#xff08;“我的页面…
阅读更多...
mac上搭建鸿蒙开发环境（2024）

mac上搭建鸿蒙开发环境（2024）

开发环境 设备 MacBook Pro 芯片 Apple M1 系统 11.4 内存 16 GB 一、下载公开版本的DevEco Studio 华为官方目前对外提供的版本是DevEco Studio 3.1&#xff0c;可在官网下载https://developer.huawei.com/consumer/cn/deveco-studio/ 因为目前还在学习阶段&#xff0c;…
阅读更多...
OpenHarmony实战：轻量系统STM32F407芯片移植案例

OpenHarmony实战：轻量系统STM32F407芯片移植案例

介绍基于STM32F407IGT6芯片在拓维信息Niobe407开发板上移植OpenHarmony LiteOS-M轻量系统&#xff0c;提供交通、工业领域开发板解决方案。 移植架构采用Board与SoC分离方案&#xff0c;使用arm gcc工具链Newlib C库&#xff0c;实现了lwip、littlefs、hdf等子系统及组件的适配…
阅读更多...
循序表实战——基于循序表的通讯录

循序表实战——基于循序表的通讯录

前言&#xff1a;本篇文章主要是利用顺序表作为底层&#xff0c; 实现一个通讯录。偏向于应用&#xff0c; 对于已经学习过c的友友们可能没有难度了已经。没有学习过c的友友&#xff0c; 如果顺序表不会写&#xff0c; 或者说没有自己实现过&#xff0c; 请移步学习顺序表相关内…
阅读更多...
xgo: golang基于-toolexec实现猴子补丁

xgo: golang基于-toolexec实现猴子补丁

注&#xff1a; 转载请注明出处&#xff0c; 原文链接。 概述 在这篇博客中&#xff0c;我将详细介绍 xgo 的实现细节。 如果你不知道&#xff0c;xgo 项目位于 https://github.com/xhd2015/xgo。 它的作用很简单&#xff0c;就是在每个 Go 函数的开头添加拦截器&#xff0…
阅读更多...
python-面向对象编程

python-面向对象编程

面向对象编程 面向对象&#xff0c;python中支持两种编程方式&#xff0c;来写代码&#xff0c;分别是&#xff1a;函数式编程和面向对象 函数式&#xff1a; # 定义函数&#xff0c;在函数中实现功能 def func():print("一个NB的功能")面向对象 calss FOO(object):d…
阅读更多...
git提交代码时报错，提不了

git提交代码时报错，提不了

问题 今天在换了新电脑&#xff0c;提交代码时报错 ✖ eslint --fix found some errors. Please fix them and try committing again. ✖ 21 problems (20 errors, 1 warning) husky > pre-commit hook failed (add --no-verify to bypass) 解决 通过 --no-verify 解决&…
阅读更多...
JavaScript - 请你说一说对随机数的理解

JavaScript - 请你说一说对随机数的理解

难度级别：初级及以上 提问概率：40% 在前端开发中，随机数的应用场景非常多，而且也是一个常见的考点。例如网页登录的验证码，看似只有4个随机数字加字母的组合，其实这也是随机数的范畴；例如在抽奖算法中，可以用随机数确定用户中奖的概率…
阅读更多...
解决电脑无故自动关机或重启的15种方法，总有一种适合你

解决电脑无故自动关机或重启的15种方法，总有一种适合你

序言 你的Windows PC是否在没有警告的情况下关闭或重新启动？这背后有几个潜在的原因。例如，它可能是软件/硬件冲突、过热或硬盘驱动器错误。本故障排除指南将概述在Windows 10/11中修复自动关闭和重新启动的多个解决方案。 如果你的计算机经常关闭，则必须在安全模式下启动…
阅读更多...
如何实现异地公网环境访问本地部署的支付宝沙箱环境调试支付SDK

如何实现异地公网环境访问本地部署的支付宝沙箱环境调试支付SDK

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
Flutter如何集成到已有iOS工程上

Flutter如何集成到已有iOS工程上

大家好&#xff0c;我是咕噜铁蛋&#xff0c;今天我将和大家分享一个实用的技术教程——如何将Flutter集成到已有的iOS工程中。Flutter是Google推出的一款开源的移动UI框架&#xff0c;它允许开发者使用Dart语言来开发高性能、美观的原生应用&#xff0c;并支持iOS和Android两大…
阅读更多...
最新文章

Copyright @ 2022~2023