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

google 浏览器插件开发简单学习案例：TodoList；打包成crx离线包

news 2026/3/27 21:38:11

参考：
google插件支持：
https://blog.csdn.net/weixin_42357472/article/details/140412993

这里是把前面做的TodoList做成google插件，具体网页可以参考下面链接

TodoList网页：
https://blog.csdn.net/weixin_42357472/article/details/140594704

1、代码部分

下面开始把内容转成google插件：

在这里插入图片描述
为扩展准备三个不同尺寸的图标（16x16, 48x48, 128x128像素），并将它们放在 icons 文件夹中

manifest.json
google浏览器差距定义文件

{"manifest_version": 3,"name": "TodoList Extension","version": "1.0","description": "A simple TodoList Chrome extension","action": {"default_icon": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"}},"permissions": ["storage", "sidePanel"],"background": {"service_worker": "background.js"},"icons": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"},"side_panel": {"default_path": "index.html"}}

background.js
想在侧边栏打开

chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TodoList</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>TodoList</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="Enter a new task" required><button type="submit" id="add-button">Add</button></form><ul id="todo-list"></ul><script src="script.js"></script>
</body>
</html>

script.js

const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');function loadTodos() {chrome.storage.sync.get(['todos'], function(result) {const todos = result.todos || [];todos.forEach(todo => {addTodoToDOM(todo.text, todo.completed);});});
}function saveTodos() {const todos = Array.from(todoList.children).map(li => ({text: li.querySelector('span').textContent,completed: li.classList.contains('completed')}));chrome.storage.sync.set({todos: todos});
}function addTodoToDOM(text, completed = false) {const li = document.createElement('li');li.className = 'todo-item' + (completed ? ' completed' : '');li.innerHTML = `<input type="checkbox" ${completed ? 'checked' : ''}><span>${text}</span><button class="delete-button">Delete</button>`;li.querySelector('input[type="checkbox"]').addEventListener('change', function() {li.classList.toggle('completed');if (li.classList.contains('completed')) {todoList.appendChild(li);} else {todoList.insertBefore(li, todoList.firstChild);}saveTodos();});li.querySelector('.delete-button').addEventListener('click', function() {li.remove();saveTodos();});if (completed) {todoList.appendChild(li);} else {todoList.insertBefore(li, todoList.firstChild);}
}todoForm.addEventListener('submit', function(e) {e.preventDefault();if (todoInput.value.trim() === '') return;addTodoToDOM(todoInput.value);saveTodos();todoInput.value = '';
});loadTodos();

styles.css

body {font-family: Arial, sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;
}
h1 {text-align: center;
}
#todo-form {display: flex;margin-bottom: 20px;
}
#todo-input {flex-grow: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;
}
#add-button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;
}
#todo-list {list-style-type: none;padding: 0;
}
.todo-item {display: flex;align-items: center;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 4px;
}
.todo-item.completed {text-decoration: line-through;opacity: 0.6;
}
.todo-item input[type="checkbox"] {margin-right: 10px;
}
.delete-button {margin-left: auto;background-color: #f44336;color: white;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;
}

2、加载使用

在插件中心加载上面的文件夹，注意提前打开开发者模型
在这里插入图片描述
然后点击右上角对应的todolist插件即可

3、打包成crx离线包

chrome://extensions

打包插件
在"扩展程序"页面，点击"打包扩展程序"按钮
在"扩展程序根目录"中，选择你的插件文件夹
如果是第一次打包，可以不填"私有密钥文件"
点击"打包扩展程序"

在这里插入图片描述
打包回生成两个文件：

Chrome会生成两个文件：一个.crx文件和一个.pem文件
.crx文件就是你需要的离线安装包
.pem文件是私钥，用于后续更新，请妥善保管

在这里插入图片描述

google 浏览器插件开发简单学习案例：TodoList；打包成crx离线包

参考： google插件支持： https://blog.csdn.net/weixin_42357472/article/details/140412993 这里是把前面做的TodoList做成google插件，具体网页可以参考下面链接 TodoList网页： https://blog.csdn.net/weixin_42357472/article/de…...

编程日记 2024/7/27 21:43:15

如何学习Doris：糙快猛的大数据之路（从入门到专家）

引言:大数据世界的新玩家还记得我第一次听说"Doris"这个名字时的情景吗?那是在一个炎热的夏日午后,我正在办公室里为接下来的大数据项目发愁。作为一个刚刚跨行到大数据领域的新手,我感觉自己就像是被丢进了深海的小鱼—周围全是陌生的概念和技术。就在这时,我的…...

编程日记 2024/7/27 21:36:05

梯度下降算法，gradient descent algorithm

定义：是一个优化算法，也成最速下降算法，主要的部的士通过迭代找到目标函数的最小值，或者收敛到最小值。说人话就是求一个函数的极值点，极大值或者极小值算法过程中有几个超参数： 学习率n，又称…...

编程日记 2024/7/27 21:35:04

Spring boot 2.0 升级到 3.3.1 的相关问题（六）

文章目录 Spring boot 2.0 升级到 3.3.1 的相关问题 （六）spring-data-redis 和 Spring AOP 警告的问题问题描述问题调研结论解决方案方案1-将冲突的Bean 提升为InfrastructureBean方案2 其他相关资料 Spring boot 2.0 升级到 3.3.1 的相关问题 &#xff…...

编程日记 2024/7/27 21:34:03

C++模版基础知识与STL基本介绍

目录一. 泛型编程二. 函数模板 1. 概念 2. 函数模版格式 3. 函数模版的原理 4. 模版函数的实例化 (1). 隐式实例化 (2.) 显式实例化 5. 模版参数的匹配原则三. 类模板 1. 类模板的定义格式 2. 类模板的实例化四. STL的介绍 1. 什么是STL？ 2. STL的版…...

编程日记 2024/7/27 21:33:02

Android 防止重复点击

1.第一种方式： // 两次点击按钮之间的点击间隔不能少于1000毫秒 private static final int MIN_CLICK_DELAY_TIME 700; private static long lastClickTime; /** * 是否是快速点击 * return */ public static boolean isFastClick() { …...

编程日记 2024/7/27 21:32:02

使用阿里云云主机通过nginx搭建文件服务器

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、准备基础环境二、安装配置nginx三、阿里云安全组配置安全组配置 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/4ee96f38312e4771938e40f463987…...

编程日记 2024/7/27 21:30:00

微信Android一面凉经(2024)

微信Android一面凉经(2024) 笔者作为一名双非二本毕业7年老Android, 最近面试了不少公司, 目前已告一段落, 整理一下各家的面试问题, 打算陆续发布出来, 供有缘人参考。今天给大家带来的是《微信Android一面凉经(2024)》。面试职位: 微信-客户端开发工程师-基础功能(广州) And…...

编程日记 2024/7/27 21:27:56

VMware、Docker - 让虚拟机走主机代理，解决镜像封禁问题

文章目录虚拟机全局代理配置找到 VMnet8 的 IPv4 地址代理相关配置虚拟机代理配置 Docker 代理配置修改镜像修改 Docker 代理配置虚拟机全局代理配置找到 VMnet8 的 IPv4 地址 a）打开此电脑，输入 “控制面板”，然后回车. b）之…...

编程日记 2024/7/27 21:26:55

版本管理｜为什么不推荐使用Git Rebase

文章目录什么是 Git Rebase？如何使用 Git Rebase？基本语法示例更多选项注意事项何时使用何时避免其他注意事项为什么需要谨慎使用 Git Rebase？面试中的常见问题问题 1: Git Rebase 和 Git Merge 有何不同？问题 2: 为什么有时应…...

编程日记 2024/7/27 21:24:54

解决异常：Caused by: java.security.cert.CertificateException: No subject alternative names matching IP address xxx.xx.xx.xx found // Https POST 请求private cn.hutool.json.JSON PostGsData(String url, String appKey, String token, Map<String, Ob…...

编程日记 2024/7/27 21:23:53

C# 数组常用遍历方式

// 假设数组Point[] points new Point[2];// 第一种遍历 forfor (int i 0; i < points.Length; i){Point p points[i];Console.WriteLine($"X{p.X},y{p.Y}");}// 第二种遍历 foreachforeach (Point p in points){Console.WriteLine($"X{p.X},y{p.Y}"…...

编程日记 2024/7/27 21:22:52

【JavaScript】详解Day.js：轻量级日期处理库的全面指南

文章目录一、Day.js简介1. 什么是Day.js？2. 安装Day.js 二、Day.js的基本用法1. 创建日期对象2. 格式化日期3. 解析日期字符串4. 操作日期5. 比较日期三、Day.js的高级功能1. 插件机制2. 国际化支持四、实际应用案例1. 事件倒计时2. 日历应用在JavaScript开发中…...

编程日记 2024/7/27 21:21:51

AI算法与图像处理 | 吴恩达团队新作！多模态方向

本文来源公众号“AI算法与图像处理”，仅用于学术分享，侵权删，干货满满。原文链接：吴恩达团队新作！多模态方向研究评估了先进多模态基础模型在 10 个数据集上的多样本上下文学习，揭示了持续的性能提升。…...

编程日记 2024/7/27 21:20:50

云服务器Ubuntu18.04进行Nginx配置

云服务器镜像版本信息：Ubuntu 18.04 server 64bit，本文记录了在改版本镜像上安装Nginx，并介绍了Nginx配置文件目录，便于后面再次有需求时进行复习。文章目录 Nginx的安装Nginx配置文件分析 Nginx的安装 1.执行下面命令进行安装…...

编程日记 2024/7/27 21:18:47

SQL labs-SQL注入（四，sqlmap对于post传参方式的注入）

本文仅作为学习参考使用，本文作者对任何使用本文进行渗透攻击破坏不负任何责任。序言：本文主要讲解基于SQL labs靶场，sqlmap工具进行的post传参方式的SQL注入。传参方式有两类，一类是直接在url栏内进行url编码后进行的传参&am…...

编程日记 2024/7/27 21:17:46

R包：plot1cell单细胞可视化包

介绍 plot1cell是用于单细胞数据seurat数据对象的可视化包。安装 ## You might need to install the dependencies below if they are not available in your R library. bioc.packages <- c("biomaRt","GenomeInfoDb","EnsDb.Hsapiens.v86&qu…...

编程日记 2024/7/27 21:16:44

Tent混沌人工蜂群与粒子群混合算法遇到问题，具体问题及解决方案如文。

🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！问题描述 Tent混沌人工蜂…...

编程日记 2024/7/27 21:13:41

Python文献调研（一）环境搭建

一、安装Python版本 1.点击进入Python官网 Download Python | Python.org 2.根据自己的需求选择python的版本，点击【Download】 3.自定义安装路径，记得勾选Add Python xxx to PATH 这步是自动配置环境变量的，如果忘记勾选，建议…...

编程日记 2024/7/27 21:10:37

URL重写

目录步骤1 规则语法 Nginx URL重写规则语法 Apache URL重写规则语法步骤2 规则配置 Apache URL重写规则配置启用mod_rewrite模块配置.htaccess文件编写重写规则测试重写规则 Nginx URL重写规则配置配置server或location块测试重写规则步骤1 规则语法 Ngin…...

编程日记 2024/7/27 21:08:35

QT窗口特效实战：从透明到异形控件的全方位实现指南

1. 从零开始理解QT窗口特效第一次接触QT窗口特效时，我被那些酷炫的透明和异形界面深深吸引。记得当时看到Mac OS X的Dock栏那种毛玻璃效果，就特别想在自己的QT应用中实现类似效果。经过多年实战，我发现QT实现这些特效其实比想象中简单得多。…...

编程新知 2026/3/27 20:51:39

python基于微信小程序的旅游攻略分享平台

目录需求分析与功能规划技术架构设计数据库设计接口开发小程序前端开发部署与测试运营与迭代注意事项项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作需求分析与功能规划明确平台核心功能：用户注册登录、攻略发布与…...

编程新知 2026/3/27 20:45:38

SDMatte Web端体验优化：首屏加载速度与模型预热机制说明

SDMatte Web端体验优化：首屏加载速度与模型预热机制说明 1. 引言在电商、设计、内容创作等领域，高质量的图像抠图已经成为刚需。SDMatte作为一款专注于复杂边缘和透明物体处理的AI抠图工具，其Web端体验直接影响用户的使用感受。本文将详细…...

编程新知 2026/3/27 20:17:08

海康MVS相机+Halcon标定实战：18张图搞定畸变矫正（附标定板选购指南）

海康MVS相机Halcon标定实战：18张图搞定畸变矫正与标定板选购指南工业视觉系统的精度往往取决于相机标定的准确性。在实际项目中，我们常遇到这样的困境：明明按照教程步骤操作，标定结果却总是不尽如人意。本文将分享一套经过实战验…...

编程新知 2026/3/27 20:17:08

KMS_VL_ALL_AIO激活工具完全指南：从问题诊断到长效管理

KMS_VL_ALL_AIO激活工具完全指南：从问题诊断到长效管理【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 如何诊断Windows/Office激活失败的核心原因？ 1.1 激活失败的三大…...

编程新知 2026/3/27 19:08:50