Chrome扩展弹出窗口大小可变

基础概念

Chrome扩展弹出窗口是指在使用Chrome浏览器时，通过安装扩展程序后，可以通过点击扩展图标弹出的一个独立窗口。这个窗口可以用来展示扩展的功能界面，如设置选项、工具栏、通知等。

类型

固定大小：弹出窗口的大小是固定的，用户无法调整。
可变大小：弹出窗口的大小可以根据内容或用户操作动态调整。

应用场景

设置界面：用于展示和修改扩展的设置选项。
工具栏：提供快捷操作按钮，方便用户快速执行常用功能。
通知中心：用于显示扩展的通知信息。

实现可变大小弹出窗口

要实现一个可变大小的Chrome扩展弹出窗口，可以使用HTML和CSS来设计界面，并通过JavaScript来控制窗口的大小。

示例代码

HTML (popup.html):

<!DOCTYPE html>
<html>
<head>
    <title>可变大小弹出窗口</title>
    <style>
        body {
            width: 300px;
            height: 200px;
            overflow: auto;
        }
        .resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            background-color: blue;
            cursor: se-resize;
        }
    </style>
</head>
<body>
    <h1>可变大小弹出窗口</h1>
    <p>这是一个可变大小的弹出窗口示例。</p>
    <div class="resize-handle"></div>
    <script src="popup.js"></script>
</body>
</html>

JavaScript (popup.js):

document.addEventListener('DOMContentLoaded', function() {
    const resizeHandle = document.querySelector('.resize-handle');
    let isResizing = false;
    let initialWidth, initialHeight, initialMouseX, initialMouseY;

    resizeHandle.addEventListener('mousedown', function(event) {
        isResizing = true;
        initialWidth = window.outerWidth;
        initialHeight = window.outerHeight;
        initialMouseX = event.clientX;
        initialMouseY = event.clientY;
    });

    document.addEventListener('mousemove', function(event) {
        if (!isResizing) return;
        const deltaX = event.clientX - initialMouseX;
        const deltaY = event.clientY - initialMouseY;
        window.resizeTo(initialWidth + deltaX, initialHeight + deltaY);
    });

    document.addEventListener('mouseup', function() {
        isResizing = false;
    });
});