当前位置： 首页 > news >正文

Chrome插件（二）—Hello World！

news 2026/2/8 18:53:19

本小节将指导你从头到尾创建一个基本的Chrome插件，你可以认为是chrome插件开发的“hello world”！

以下详细描述了各个步骤：

第一步：设置开发环境

确保你拥有以下工具：

  • 文本编辑器：如Visual Studio Code, Sublime Text等，用于编辑代码。
  • Chrome浏览器：因为你将会在Chrome中测试和调试你的插件。

第二步：创建项目文件夹和文件

  1. 创建插件目录：在你的计算机上创建一个新的文件夹，用于存放你的插件文件。例如，名为0_HelloWorld。
  2. 创建必要的文件：在这个目录中创建以下文件：
    • manifest.json：插件的配置文件。
    • content.js：（如果需要）插件的内容脚本文件。
    • popup.html：（如果需要）点击插件图标时显示的弹出页面。
    • icon.png：插件的图标文件。
0_HelloWorld/
├── manifest.json
├── popup.html
├── popup.js
└── icon.png

第三步：填写manifest.json文件

这个文件告诉Chrome关于你的插件的信息，包含权限、脚本及其他重要设置。

{"manifest_version": 2,"name": "显示当前时间","version": "1.0","description": "点击揽件图标显示当前时间","icons": {"48": "icon.png"},"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"}
}

第四步：编写弹出页面popup.html

编辑popup.html来设定点击插件图标时看到的弹出页面，该页面将显示时间。

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head><title>当前时间</title>
</head>
<body><h1 id="time">加载中...</h1><script src="popup.js"></script>
</body>
</html>

第五步：编写弹出页面的JavaScript逻辑popup.js

编写JavaScript代码以将当前时间更新到弹出的窗口中。

// popup.js
// 当弹出页面的DOM加载完成时执行
document.addEventListener('DOMContentLoaded', function() {displayTime();
});// 显示当前的时间
function displayTime() {var now = new Date();var timeString = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();document.getElementById('time').textContent = timeString;
}

第六步：加载你的插件

  • 打开Chrome浏览器。
  • 导航到chrome://extensions/。
  • 开启右上角的开发者模式。
  • 点击“加载已解压的扩展程序”，选择0_HelloWorld文件夹。

第七步：测试插件

现在你可以点击浏览器工具栏中的揽件图标，应该能看到一个显示当前时间的小窗口弹出。

第八步：调试

如果弹出窗口没有正确显示时间，你需要检查popup.js中的代码是否正确，以及popup.html是否正确连接到JavaScript文件。

小结

这是一个简单的Chrome插件创建流程，当然实际开发过程中可能包含更多复杂的逻辑和功能。本教程为你提供了一个起点，你可以根据你的需求扩展和丰富揽件的功能。

相关文章：

Chrome插件（二）—Hello World！

本小节将指导你从头到尾创建一个基本的Chrome插件&#xff0c;你可以认为是chrome插件开发的“hello world”&#xff01; 以下详细描述了各个步骤&#xff1a; 第一步&#xff1a;设置开发环境 确保你拥有以下工具&#xff1a; 文本编辑器&#xff1a;如Visual Studio Cod…...

编程日记 2024/2/25 15:57:08

DBAPI如何使用数组类型参数

DBAPI如何使用数组类型参数 需求 根据多个id去查询学生信息 API创建 在基本信息标签&#xff0c;创建参数ids &#xff0c;参数类型选择 Array<bigint> 在执行器标签&#xff0c;填写sql&#xff0c;使用in查询 select * from student where id in <foreach ope…...

编程日记 2024/2/25 15:54:05

博途PLC PID仿真(单容水箱液位高度控制含变积分变增益测试)

单容水箱和双荣水箱的微分方程和数值求解，可以参考下面文章链接： https://rxxw-control.blog.csdn.net/article/details/131139432https://rxxw-control.blog.csdn.net/article/details/131139432这篇博客我们利用欧拉求解器在PLC里完成单容水箱的数学建模。PLC也可以和MATL…...

编程日记 2024/2/25 15:51:03

第1集《灵峰宗论导读》

《灵峰宗论》导读。诸位法师&#xff0c;诸位同学&#xff0c;阿弥陀佛&#xff01;&#xff08;阿弥陀佛&#xff01;&#xff09; 学人很高兴&#xff0c;这次有一个殊胜的因缘来跟大家共同地学习《灵峰宗论》的课程。《灵峰宗论》是蕅益大师一生当中在佛法的修学心得。在蕅…...

编程日记 2024/2/25 15:50:02

nuxt CSS 存放到独立文件进行SEO优化

nuxt CSS 到独立文件 在Nuxt.js中将CSS样式从单个文件分离为多个独立的文件可以通过使用extract-text-webpack-plugin来完成。 首先&#xff0c;确保已经安装了该插件&#xff1a; npm install extract-text-webpack-plugin --save-dev然后&#xff0c;在项目根目录下创建一个…...

编程日记 2024/2/25 15:45:57

台式电脑电源功率越大越费电吗？装机选购多少W电源

要组装一台电脑&#xff0c;我们首先需要选择硬件。 硬件搭配最关键的一点就是CPU和主板的兼容性。 硬件、电源等之间的平衡都需要仔细考虑。 那么台式电脑电源多大功率合适呢&#xff1f; 下面分享组装电脑电源瓦数选购指南&#xff0c;教您正确选择合适的电源瓦数。 让我们来…...

编程日记 2024/2/25 15:44:57

《TCP/IP详解 卷一》第4章 地址解析协议ARP

目录 4.1 引言 4.2 一个例子 4.3 ARP缓存 4.4 ARP帧格式 4.5 ARP例子 4.6 ARP缓存超时 4.7 代理ARP 4.8 免费ARP和地址冲突检测 4.9 ARP命令 4.10 使用ARP设置嵌入式设备IPv4地址 4.11 与ARP相关攻击 4.12 总结 4.1 引言 地址解析&#xff1a; IPv4&#xff1a;AR…...

编程日记 2024/2/25 15:43:56

如何在pgAdmin中用替换的值更新jsonb列？

我有一个名为files的PostgreSQL表&#xff0c;其中包括一个名为formats的jsonb表。虽然有些行是[null]&#xff0c;但其他行具有此结构的对象&#xff1a; {"thumbnail": {"ext": ".jpg","url": "https://some-url.com/image01.…...

编程日记 2024/2/25 15:42:55

冯诺依曼体系结构 计算机组成的金字塔

01 冯诺依曼体系结构&#xff1a;计算机组成的金字塔 学习计算机组成原理&#xff0c;到底是在学些什么呢&#xff1f;这个事儿&#xff0c;一两句话还真说不清楚。不过没关系&#xff0c;我们先从“装电脑”这个看起来没有什么技术含量的事情说起&#xff0c;来弄清楚计算机到…...

编程日记 2024/2/25 15:41:54

AWS安全组是什么？有什么用？

最近看到小伙伴在问&#xff0c;AWS安全组是什么&#xff1f;有什么用&#xff1f;今天我们大家就来简单聊聊&#xff0c;仅供参考哦&#xff01; AWS安全组是什么&#xff1f;有什么用&#xff1f; 【回答】&#xff1a;AWS安全组是一种虚拟防火墙&#xff0c;用于控制进出…...

编程日记 2024/2/25 15:40:53

SSM项目集成Spring Security 4.X版本 之 加入DWZ,J-UI框架实现登录和主页菜单显示

目录 前言 一、加入DWZ J-UI框架 二、实现登录页面 三、实现主页面菜单显示 前言 大家好&#xff01;写文章之前先列出几篇相关文章。本文内容也在其项目中接续实现。 一. SSM项目集成Spring Security 4.X版本&#xff08;使用spring-security.xml 配置文件方式&#xff…...

编程日记 2024/2/25 15:34:46

【MySQL】如何理解MySQL的锁（图文并茂，一网打尽）

一、锁的介绍 锁是计算机协调多个进程或者线程并发访问某一资源的机制。那么如何保证数据并发访问的一致性、有效性是数据库必须解决的一个问题&#xff0c;锁的冲突也是影响数据库并发访问性能的一个重要因素&#xff0c;所以数据库中锁的应用极为重要&#xff0c;其复杂度也更…...

编程日记 2024/2/25 15:31:42

【设计模式】01-装饰器模式Decorator

作用&#xff1a;在不修改对象外观和功能的情况下添加或者删除对象功能&#xff0c;即给一个对象动态附加职能 装饰器模式主要包含以下角色。 抽象构件&#xff08;Component&#xff09;角色&#xff1a;定义一个抽象接口以规范准备接收附加责任的对象。具体构件&#xff08…...

编程日记 2024/2/25 15:29:40

【Python笔记-设计模式】原型模式

一、说明 原型模式是一种创建型设计模式&#xff0c; 用于创建重复的对象&#xff0c;同时又能保证性能。 使一个原型实例指定了要创建的对象的种类&#xff0c;并且通过拷贝这个原型来创建新的对象。 (一) 解决问题 主要解决了对象的创建与复制过程中的性能问题。主要针对…...

编程日记 2024/2/25 15:24:36

启动node服务报错Error: listen EACCES: permission denied 0.0.0.0:5000

启动node服务报错&#xff1a; 解决方案&#xff1a; 将监听端口改成3000或者其他 修改后结果&#xff1a; 参考原文&#xff1a; Error: listen EACCES: permission denied_error when starting dev server: error: listen eacc-CSDN博客...

编程日记 2024/2/25 15:23:35

onlyoffice api开发

编写代码 按照https://api.onlyoffice.com/editors/basic编写代码 <html> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scal…...

编程日记 2024/2/25 15:22:34

设计模式-工厂方法模式（C++）

工厂方法模式&#xff08;Factory Method Pattern&#xff09;是一种创建型设计模式&#xff0c;它定义了一个用于创建对象的接口&#xff0c;但将实际的对象创建过程延迟到子类中。这种模式解耦了具体产品的创建过程&#xff0c;使得系统更加灵活和可扩展。 下面是一个使用 C…...

编程日记 2024/2/25 15:21:32

ThreeJS 几何体顶点position、法向量normal及uv坐标 | UV映射 - 法向量 - 包围盒

文章目录 几何体的顶点position、法向量normal及uv坐标UV映射UV坐标系UV坐标与顶点坐标设置UV坐标案例1&#xff1a;使用PlaneGeometry创建平面缓存几何体案例2&#xff1a;使用BufferGeometry创建平面缓存几何体 法向量 - 顶点法向量光照计算案例1&#xff1a;不设置顶点法向量…...

编程日记 2024/2/25 15:19:30

基于SpringBoot的家教管理系统

基于SpringBootVue的家教管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 前台主页 家教 个人中心 管理员界面 摘要 本文介绍了基于SpringBoot框架开发的家…...

编程日记 2024/2/25 15:17:26

简单mock server模拟用户请求给小程序提供数据

整理小程序代码时发现一此小程序离开了mock-server基本上没有办法显示了,因此用node,express来满足给小程序提供演示数据的功能 const express require(express); const { createCanvas, Image } require(canvas); const fs require(fs); const path require(path);…...

编程日记 2024/2/25 15:14:23

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/11/22 20:41:02

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2026/1/31 14:20:10

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2026/2/7 19:54:51

数据结构：泰勒展开式：霍纳法则（Horner‘s Rule）

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

编程新知 2026/2/4 23:58:11

React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？

系列回顾&#xff1a; 在上一篇《React核心概念&#xff1a;State是什么&#xff1f;》中&#xff0c;我们学习了如何使用useState让一个组件拥有自己的内部数据&#xff08;State&#xff09;&#xff0c;并通过一个计数器案例&#xff0c;实现了组件的自我更新。这很棒&#…...

编程新知 2025/9/6 3:35:30