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浏览器差距定义文件

bash 复制代码
{
    "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

想在侧边栏打开

bash 复制代码
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

index.html

bash 复制代码
<!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

bash 复制代码
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

bash 复制代码
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

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

打包回生成两个文件:

bash 复制代码
Chrome会生成两个文件:一个.crx文件和一个.pem文件
.crx文件就是你需要的离线安装包
.pem文件是私钥,用于后续更新,请妥善保管
相关推荐
三世2 天前
Jupyter notebook 添加目录插件
jupyter·插件·目录·notebook
像风一样自由20202 天前
Edge 浏览器插件开发:图片切割插件
服务器·edge·插件
angelanana3 天前
【V8引擎blog翻译-191】迭代器助手
浏览器·v8
bjzhang754 天前
6款IntelliJ IDEA插件,让Spring和Java开发如虎添翼
spring·intellij-idea·插件
摇光937 天前
[前端面试]浏览器
前端·面试·职场和发展·浏览器
Crazy Struggle8 天前
推荐一个 ASP.NET Core 的轻量级插件框架
.net·开源项目·插件·插件框架
星尘安全12 天前
【ChatGPT插件漏洞三连发之一】未授权恶意插件安装
安全·网络安全·chatgpt·漏洞·插件
老菜鸟YDZ12 天前
Stable Diffusion视频插件Ebsynth Utility使用方法
stable diffusion·aigc·ai绘图·插件·1024程序员节·ebsynth utility
老菜鸟YDZ12 天前
Stable Diffusion视频插件Ebsynth Utility安装方法
人工智能·aigc·ai绘画·插件·视频制作·ebsynth utility·stable diffu
星尘安全13 天前
【ChatGPT插件漏洞三连发之二】零点击Github仓库接管
网络安全·chatgpt·github·插件·身份验证