时间戳

首页 > 解决方案 > 在 chrome 扩展中存储和检索复选框的值

javascript - 在 chrome 扩展中存储和检索复选框的值

问题描述

我正在制作一个 chrome 扩展，我希望能够保存和读取复选框的状态（格式化为一个开关）以影响程序的运行方式。

目前我什至无法以任何方式访问该复选框，因为我以前从未以任何身份使用过 javascript。为了测试我是否可以读取当前状态，我使用了 console.log(document.getElementById("activeSwitch").checked) 或其一些变体。

这是我用来创建按钮的弹出 html

<head>

    <title>test</title>

    <script src="popup.js"></script>

    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

            .switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

            .slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
            }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        .slider.round {
            border-radius: 34px;
        }

            .slider.round:before {
                border-radius: 50%;
            }

    </style>

</head>

<body>

    <div>
        <p><b>test extension</b></p>

        <label id="activeSwitch" class="switch">

            <input type="checkbox" checked/>

            <span class="slider round"></span>

        </label>

    </div>

</body>

标签： javascriptgoogle-chromegoogle-chrome-extension

解决方案

推荐阅读