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文件是私钥,用于后续更新,请妥善保管

在这里插入图片描述

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

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

相关文章

phpstorm配置xdebug3

查看php路径相关信息 php --ini安装xdebug https://www.jetbrains.com/help/phpstorm/2024.1/configuring-xdebug.html?php.debugging.xdebug.configure php.ini 配置 在最后添加&#xff0c;以下是我的配置 [xdebug] zend_extension/opt/homebrew/Cellar/php8.1/8.1.29/p…

NXP芯片知识:eMIOS和STM和LCU和BCTU和TRGMUX和PIT区别

在嵌入式系统中&#xff0c;各种定时和控制模块有不同的功能和应用场景。以下是这些模块的具体应用区别&#xff1a; 1. Enhanced Modular I/O System (eMIOS) 应用场景&#xff1a; 脉宽调制&#xff08;PWM&#xff09;&#xff1a;用于电机控制、亮度调节、音频信号生成等…

2024秋招算法

文章目录 参考资料一 数组1.1 二分查找1.2 移除元素1.3 长度最小的子数组1.4 螺旋矩阵1.5 在排序数组中查找元素的第一个和最后一个位置 二 链表2.1 移除链表元素2.2 设计链表2.3 反转链表2.4 两两交换链表中的节点2.5 删除链表的倒数第N个节点2.6 链表相交2.7 环形链表II 三 哈…

HIVE:使用get_json_object解析json对象

1 json对象 JSON 对象使用在大括号 {…} 中书写。对象可以包含多个 key/value&#xff08;键/值&#xff09;对。key 必须是字符串&#xff0c;value 可以是合法的 JSON 数据类型&#xff08;字符串, 数字, 对象, 数组, 布尔值或 null&#xff09;。key 和 value 中使用冒号 :…

力扣爆刷第167天之TOP200五连刷101-105(二叉树序列化、验证IP、LFU)

力扣爆刷第167天之TOP200五连刷101-105&#xff08;二叉树序列化、验证IP、LFU&#xff09; 文章目录 力扣爆刷第167天之TOP200五连刷101-105&#xff08;二叉树序列化、验证IP、LFU&#xff09;一、224. 基本计算器二、297. 二叉树的序列化与反序列化三、283. 移动零四、468. …

【每日一练】python的类型注解和Union类型使用方法

""" 本节课程内容 函数&#xff08;方法&#xff09;的类型注解 Union类型 1.为函数&#xff08;方法&#xff09;的形参进行类型的注解 2.为函数&#xff08;方法&#xff09;的返回值进行类型的注解 注意&#xff1a;类型注解并非强制性&#xff0c;是提示…

React 学习——行内样式、外部样式、动态样式

三种样式的写法 import "./index.css"; //同级目录下的样式文件 function App() {const styleCol {color: green,fontSize: 40px}// 动态样式const isBlock false;return (<div className"App">{/* 行内样式 */}<span style{{color:red,fontSiz…

Vue修饰符的使用

在 Vue.js 中&#xff0c;修饰符&#xff08;modifiers&#xff09;是一种特殊的后缀&#xff0c;用于指令以特殊方式修改指令的行为。修饰符通过在指令名称后面添加点&#xff08;.&#xff09;及修饰符名称来表示。Vue 提供了一些常用的修饰符&#xff0c;帮助开发者处理事件…

工程视角:数据结构驱动的应用开发--字典(dictionary),列表(list)与实体

这里写目录标题 业务业务场景流程分析 实现数据访问层&#xff08;DAL&#xff09;业务逻辑层&#xff08;BLL&#xff09;用户界面层&#xff08;UI&#xff09;工具类 设计思路为什么抽出工具类关于U层使用字典的好处工程视角 业务 业务场景 在一个金融应用系统中&#xff0c…

iptables 限制端口仅特定IP访问。

注意&#xff1a; 需要用源地址(-s)&#xff0c;而不是目的地址(-d) 单个IP&#xff1a; iptables -A INPUT -p tcp -m tcp --dport 3306 -s 127.0.0.1 -j ACCEPT iptables -A INPUT -p tcp -m tcp --dport 3306 -j DROP 多个IP&#xff1a; iptables -A INPUT -p tcp -m t…

LLaVA论文阅读+Colab部署

LLaVA &#xff1a;Visual Instruction Tuning 1. Colab上部署LLaVA2. 论文摘要3. 多模态指令跟随数据4. 模型架构5. 模型训练6. 消融实验7. CC3M数据过滤8. 总结 1. Colab上部署LLaVA 代码&#xff1a; https://github.com/Czi24/Awesome-MLLM-LLM-Colab/tree/master/MLLM/LL…

CUDA编程02 - 数据并行介绍

一:概述 数据并行是指在数据集的不同部分上执行计算工作,这些计算工作彼此相互独立且可以并行执行。许多应用程序都具有丰富的数据并行性,使其能够改造成可并行执行的程序。因此,对于程序员来说,熟悉数据并行的概念以及使用并行编程语言来编写数据并行的代码是非常重要的。…

2024.7.23总结(东莞入职培训day2)

今天写总结也很晚了&#xff0c;但是今天收获特别丰满&#xff0c;必须回顾一下&#xff0c;这些都是宝贵的财富。 1.讲课老师很特别棒 今天的讲课老师特别棒&#xff0c;很是优秀&#xff0c;她讲的课程质量还是非常高的&#xff0c;能够带动学生去深度思考&#xff0c;小伙…

超大数字四舍五入保留N位小数【没bug】

大部分npm常用的插件四舍五入都是用数值直接去计算四舍五入的存在精度问题&#xff0c;本方法是用用字符串拆分比较整数大小&#xff0c;这样就避开了精度的问题&#xff1b; 该方法可以传入&#xff1a;1.134、99.99、9999999999999999999.99999、.001、12.、0.、00.、类似的…

.netcore TSC打印机打印

此文章给出两种打印案例&#xff0c; 第一种是单列打印&#xff0c;第二种是双列打印 需要注意打印机名称的设置&#xff0c;程序中使用的打印机名称为999&#xff0c;电脑中安装打印机时名称也要为999。 以下是我在使用过程中总结的一些问题&#xff1a; 一 TSC打印机使用使…

【Node.js基础02】fs、path模块

目录 一&#xff1a;fs模块-读写文件 1 加载fs模块对象 2 读制定文件内容文件 3 向文件中写入内容 二&#xff1a;path模块-路径处理 1 问题引入 2 __dirname内置变量 使用方法 一&#xff1a;fs模块-读写文件 fs模块封装了与本机文件系统交互方法和属性 1 加载fs模块…

弹性布局 flex layout HTML CSS

文章目录 效果图参考文档代码 效果图 其实弹性布局的好处是&#xff1a;当网页大小变化&#xff08;如窗口resize&#xff09;时&#xff0c;处于弹性容器(flex container)中的弹性元素(flex item) 之间的距离也会变化。 需要特别注意的是&#xff1a; 弹性布局的主要CSS如下。…

生成式AI未来趋势预测

随着生成式AI技术的不断进步&#xff0c;关于其未来发展方向的讨论也愈发激烈。生成式AI的未来可能会在对话系统&#xff08;Chat&#xff09;中展现智慧&#xff0c;也可能在自主代理&#xff08;Agent&#xff09;中体现能力。以下是具体分析&#xff1a; 1. **技术成熟度**&…

开源邮箱套件介绍系列2:Roundcube webmail

1. 项目介绍 项目网站&#xff1a;Roundcube – Free and Open Source Webmail Software Roundcube 项目是一个免费的开源网络邮件解决方案&#xff0c;具有类似桌面的用户界面&#xff08;Webmail&#xff09;&#xff0c;易于安装/配置&#xff0c;并且可以在标准的LAMPP服…

网络安全新视角:2024年威胁 landscape与防护策略

网络安全新视角&#xff1a;2024年威胁 landscape与防护策略 2024年网络安全威胁趋势分析 云集中风险 随着云计算的普及&#xff0c;云服务商集中化趋势明显&#xff0c;企业越来越依赖于少数几家云服务商&#xff0c;导致云集中风险逐渐显现。例如&#xff0c;阿里云在2023…