edge插件快速开发记录（todo)

编程入门行业动态更新时间:2024-10-10 11:29:36

edge<a href=https://www.elefans.com/category/jswz/34/1771202.html style= 插件快速开发记录（todo)"/>

edge插件快速开发记录（todo)

一、需求

心血来潮，想要研究一下edge中如何开发一个插件，先从简单的入手，正好平时习惯使用待办列表，打算开发一个插件版的todo list试试流程。这里用来记录一下过程。

二、快速构建

直接去edge官方网站找开发文档，里面会告诉你如何自行构建插件。

简单总结一下需要做的事情和注意事项：

打开edge浏览器扩展的开发人员模式。
从开发文档里面下载示例代码。
在示例代码的基础上设计并实现自己的功能。
直接从浏览器扩展页面使用“加载解压缩的扩展”将扩展导入浏览器中。

现在总体流程已经了解，接下来进行快速开发，目标是简单、能用即可。

1、配置信息

edge的插件可以认为挂载到浏览器的一个独立页面，因此使用的技术栈还是前端网页那些，需要单独配置一下插件的manifest.json，这里面会存储你插件的一些信息：

{"name": "todo list extension","version": "0.0.0.1","manifest_version": 3,"description": "An extension to recordtodo list.","icons": {"32": "icons/todo-icon.png"},"action": {"default_popup": "todo.html"},"content_scripts": [{"matches": ["<all_urls>"],"js": ["lib/jquery.min.js","lib/todo.js"]}]
}

2、完成基础功能

由于本身插件就是一个网页，这里可以构建一个简单页面来显示待办的列表满足对列表的添加和显示功能。

主页面：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>待办列表</title><style>/* 样式化待办列表 */ul {list-style-type: none;padding: 0;}li {margin-bottom: 10px;}pleted {text-decoration: line-through;color: #999;}</style>
</head>
<body><h1>待办列表</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="输入任务" /><button type="submit">添加</button></form><ul id="todo-list"><!-- 待办列表项动态添加 --></ul><script src="lib/todo.js"></script>
</body>
</html>

todo.js

// 获取表单和待办列表元素
const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const list = document.querySelector('#todo-list');// 添加待办事项
form.addEventListener('submit', function(e) {e.preventDefault();const task = input.value.trim();if (task) {const item = document.createElement('li');item.textContent = task;item.addEventListener('click', toggleComplete);list.appendChild(item);input.value = '';}
});
// 切换已完成状态
function toggleComplete() {this.classList.toggle('completed');
}

重新加载插件之后可以看到效果如下：

支持创建新的待办项，点击一个待办项可以切换完成状态。这样一个简单的todo插件就完成了。