google 浏览器插件开发简单学习案例：TodoList；打包成crx离线包
参考：
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…...
如何学习Doris：糙快猛的大数据之路（从入门到专家）
引言:大数据世界的新玩家 还记得我第一次听说"Doris"这个名字时的情景吗?那是在一个炎热的夏日午后,我正在办公室里为接下来的大数据项目发愁。作为一个刚刚跨行到大数据领域的新手,我感觉自己就像是被丢进了深海的小鱼—周围全是陌生的概念和技术。 就在这时,我的…...
梯度下降算法，gradient descent algorithm
定义：是一个优化算法，也成最速下降算法，主要的部的士通过迭代找到目标函数的最小值，或者收敛到最小值。 说人话就是求一个函数的极值点，极大值或者极小值 算法过程中有几个超参数： 学习率n，又称…...
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 的相关问题 ÿ…...
C++模版基础知识与STL基本介绍
目录 一. 泛型编程 二. 函数模板 1. 概念 2. 函数模版格式 3. 函数模版的原理 4. 模版函数的实例化 (1). 隐式实例化 (2.) 显式实例化 5. 模版参数的匹配原则 三. 类模板 1. 类模板的定义格式 2. 类模板的实例化 四. STL的介绍 1. 什么是STL？ 2. STL的版…...
Android 防止重复点击
1.第一种方式： // 两次点击按钮之间的点击间隔不能少于1000毫秒 private static final int MIN_CLICK_DELAY_TIME 700; private static long lastClickTime; /** * 是否是快速点击 * return */ public static boolean isFastClick() { …...
使用阿里云云主机通过nginx搭建文件服务器
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、准备基础环境二、安装配置nginx三、阿里云安全组配置安全组配置 
微信Android一面凉经(2024)
微信Android一面凉经(2024) 笔者作为一名双非二本毕业7年老Android, 最近面试了不少公司, 目前已告一段落, 整理一下各家的面试问题, 打算陆续发布出来, 供有缘人参考。今天给大家带来的是《微信Android一面凉经(2024)》。 面试职位: 微信-客户端开发工程师-基础功能(广州) And…...
VMware、Docker - 让虚拟机走主机代理，解决镜像封禁问题
文章目录 虚拟机全局代理配置找到 VMnet8 的 IPv4 地址代理相关配置虚拟机代理配置 Docker 代理配置修改镜像修改 Docker 代理配置 虚拟机全局代理配置 找到 VMnet8 的 IPv4 地址 a）打开此电脑，输入 “控制面板”，然后回车. b）之…...
版本管理｜为什么不推荐使用Git Rebase
文章目录 什么是 Git Rebase？如何使用 Git Rebase？基本语法示例更多选项 注意事项何时使用何时避免其他注意事项 为什么需要谨慎使用 Git Rebase？面试中的常见问题问题 1: Git Rebase 和 Git Merge 有何不同？问题 2: 为什么有时应…...
Https post 请求时绕过证书验证方案
解决异常：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…...
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}"…...
【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开发中…...
AI算法与图像处理 | 吴恩达团队新作！多模态方向
本文来源公众号“AI算法与图像处理”，仅用于学术分享，侵权删，干货满满。 原文链接：吴恩达团队新作！多模态方向 研究评估了先进多模态基础模型在 10 个数据集上的多样本上下文学习，揭示了持续的性能提升。…...
云服务器Ubuntu18.04进行Nginx配置
云服务器镜像版本信息：Ubuntu 18.04 server 64bit，本文记录了在改版本镜像上安装Nginx，并介绍了Nginx配置文件目录，便于后面再次有需求时进行复习。 文章目录 Nginx的安装Nginx配置文件分析 Nginx的安装 1.执行下面命令进行安装…...
SQL labs-SQL注入（四，sqlmap对于post传参方式的注入）
本文仅作为学习参考使用，本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 序言：本文主要讲解基于SQL labs靶场，sqlmap工具进行的post传参方式的SQL注入。 传参方式有两类，一类是直接在url栏内进行url编码后进行的传参&am…...
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…...
Tent混沌人工蜂群与粒子群混合算法遇到问题，具体问题及解决方案如文。
🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！ 问题描述 Tent混沌人工蜂…...
Python文献调研（一）环境搭建
一、安装Python版本 1.点击进入Python官网 Download Python | Python.org 2.根据自己的需求选择python的版本，点击【Download】 3.自定义安装路径，记得勾选Add Python xxx to PATH 这步是自动配置环境变量的，如果忘记勾选，建议…...
URL重写
目录 步骤1 规则语法 Nginx URL重写规则语法 Apache URL重写规则语法 步骤2 规则配置 Apache URL重写规则配置 启用mod_rewrite模块 配置.htaccess文件 编写重写规则 测试重写规则 Nginx URL重写规则配置 配置server或location块 测试重写规则 步骤1 规则语法 Ngin…...
git配置环境变量
一.找到git安装目录 打开此git安装目录下的bin文件，复制此文件路径 二.配置环境变量 2.1 右键点击此电脑的属性栏 2.2 点击高级系统配置 2.3 点击环境变量 2.4 按图中步骤进行配置 三.配置完成 win r 输入cmd打开终端 终端页面中输入 git --version 如图所示…...
vue3编程-import.meta.glob实现动态路由（菜单）
import.meta.glob 是vite提供的批量懒加载组件的方法 本地开发环境： const modules import.meta.glob(../views/**/*.vue)这段代码返回的modules是一个Map： key是vue文件的相对路径，值是一个函数，将函数打印出来，如…...
富唯智能转运机器人：高效、智能、未来的选择
在现代工业中，高效的物流和物料处理是提升生产效率的关键。富唯智能转运机器人，以其卓越的技术和智能化的设计，为各行业提供了完美的解决方案。 产品概述 富唯智能转运机器人搭载ICD系列核心控制器，拥有多种移载平台，…...
跨境电商独立站：Shopify/Wordpress/店匠选哪个？
在面对不断增加的平台运营压力时，不少跨境电商的商家逐渐将注意力转向建立自己的独立站。据《中国跨境出口电商发展报告（2022）》所示，中国拥有的独立站数量在2022年已接近20万个，这表明独立站已成为卖家拓展海外市场的…...
减轻幻觉新SOTA，7B模型自迭代训练效果超越GPT-4，上海AI lab发布
LLMs在回答各种复杂问题时，有时会“胡言乱语”，产生所谓的幻觉。解决这一问题的初始步骤就是创建高质量幻觉数据集训练模型以帮助检测、缓解幻觉。 但现有的幻觉标注数据集，因为领域窄、数量少，加上制作成本高、标注人员水平不一…...
53.最大子数组和，动态规划+贪心解法！！！
力扣53最大子数组和 题目动态规划贪心 题目 给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。 子数组是数组中的一个连续部分。 示例 1： 输入：nums…...
python+vue3+onlyoffice在线文档系统实战20240723笔记，项目界面设计和初步开发
经过之前的学习，已经能够正常打开文档了。 目前为止，我们的代码能够实现： 打开文档编辑文档手动保存自动保存虽然功能依然比较少，但是我们已经基本实现了文档管理最核心的功能，而且我们有个非常大的优势，就是支持多人同时在线协同编辑。 现在我们要开发项目，我们得做基…...
谷粒商城实战笔记-72-商品服务-API-属性分组-获取分类属性分组
文章目录 一，后端接口开发Controller层修改接口接口测试 二，前端开发 这一节的内容是开发获取分类属性分组的接口。 一，后端接口开发 Controller层修改接口 修改AttrGroupController接口。 RequestMapping("/list/{catelogId}")p…...
Vue 自定义指令
文章目录 注册局部注册全局注册 钩子钩子参数应用1、按钮权限验证2、自定义用户行为收集指令3、按钮点击防抖4、输入框自动获取焦点5、输入框自动去空字符串6、文字展示不下时展示提示框 注册 局部注册 export default {setup() {/*...*/},directives: {// 在模板中启用 v-fo…...
【python】python图书管理系统_普通用户+管理员菜单（源码+论文）【独一无二】
👉博__主👈：米码收割机 👉技__能👈：C/Python语言 👉公众号👈：测试开发自动化【获取源码商业合作】 👉荣__誉👈：阿里云博客专家博主、5…...