如何在点击Chrome扩展弹出窗口后保持按钮的状态。（JavaScript）_Javascript_Html_Css_Google Chrome Extension

如何在点击Chrome扩展弹出窗口后保持按钮的状态。（JavaScript）

javascript html css google-chrome-extension

如何在点击Chrome扩展弹出窗口后保持按钮的状态。（JavaScript）,javascript,html,css,google-chrome-extension,Javascript,Html,Css,Google Chrome Extension,我正在做一个Chrome扩展，它基本上有一个按钮。该按钮在单击时更改颜色和文本，并在“启用”和“禁用”之间切换。看看这个解释，看看我在说什么现在我想要的是，一旦我点击按钮，它进入禁用状态，它应该保持禁用状态，直到再次点击。我该怎么做我知道，每当打开扩展弹出窗口时，它就像一个新页面，因此我必须使用chrome.storage保存以前的状态，并在每次单击弹出窗口时加载此状态。我从这里得到一个小小的想法。但我不能把我的头完全绕在它周围我的舱单： { "manifest_version":

我正在做一个Chrome扩展，它基本上有一个按钮。该按钮在单击时更改颜色和文本，并在“启用”和“禁用”之间切换。看看这个解释，看看我在说什么

现在我想要的是，一旦我点击按钮，它进入禁用状态，它应该保持禁用状态，直到再次点击。我该怎么做

我知道，每当打开扩展弹出窗口时，它就像一个新页面，因此我必须使用chrome.storage保存以前的状态，并在每次单击弹出窗口时加载此状态。我从这里得到一个小小的想法。但我不能把我的头完全绕在它周围

我的舱单：

{
  "manifest_version": 2,

  "name": "Parental Control",
  "description": "This extension allows the user to change the background color of the current page.",
  "version": "1.0",
  "background":{
  "scripts": ["background.js"]
},
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "run_at": "document_start"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "storage",
    "webRequest",
    "webRequestBlocking"
  ],
  "content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["content_script.js"],
        "run_at": "document_end"
    }
]
}

popup.html：

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style type="text/css">
      body {
        width:200px;
        height:300px;
        white-space: nowrap;
       background: linear-gradient(0deg, rgba(248, 246, 242, 0.8), rgba(248, 246, 242, 0.8)), url(back_main.jpg) repeat;
      }
    </style>
    <link href="css/button.css" rel="stylesheet">
    <link href="css/logo.css" rel="stylesheet">
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
      <img src="icon.png" alt="Control" class="center" style="width:80px;height:80px;">
      <button class="button" style="vertical-align:middle" id="buttonclick">
  <span>Enable Control</span></button>
 <script type="text/javascript" src="popup.js"></script>
  </body>
</html>


入门扩展的弹出窗口
身体{
宽度：200px；
高度：300px；
空白：nowrap；
背景：线性梯度（0deg，rgba（248246242，0.8），rgba（248246242，0.8）），url（back_main.jpg）重复；
}
启用控制

popup.js：

document.addEventListener('DOMContentLoaded', function() {
    var click = document.getElementById("buttonclick")

    click.addEventListener("click", handler);
});
var count = 1;
    function handler() {
        var property = document.getElementById('buttonclick');
        if (count == 0) {
            property.style.backgroundColor = "#4f8ff7"
            property.innerHTML = "<span>Enable control</span>"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#a84237"
            property.innerHTML = "<span>Disable control</span>"

            count = 0;
        }
    }

document.addEventListener（'DOMContentLoaded'，function（）{
var click=document.getElementById（“按钮单击”）
click.addEventListener（“click”，handler）；
});
var计数=1；
函数处理程序（）{
var属性=document.getElementById（'buttonclick'）；
如果（计数=0）{
property.style.backgroundColor=“#4f8ff7”
property.innerHTML=“启用控件”
计数=1；
}
否则{
property.style.backgroundColor=“#a84237”
property.innerHTML=“禁用控制”
计数=0；
}
}

如果我正确读取了您的代码，您将使用类似布尔值的“计数”来指示按钮是否已启用。您应该能够通过调用以下命令实现已保存状态：

var obj = {};
obj['buttonState'] = count;
chrome.storage.sync.set(obj, function() {
  // this called after the save
});

要检索，只需执行相反的操作：

chrome.storage.sync.get('buttonState', function(data) {   
    // this is called after the retrieve.
    count = data['buttonState'];
});

如果我正确地阅读了您的代码，您将使用类似布尔值的“count”来指示按钮是否已启用。您应该能够通过调用以下命令实现已保存状态：

var obj = {};
obj['buttonState'] = count;
chrome.storage.sync.set(obj, function() {
  // this called after the save
});

要检索，只需执行相反的操作：

chrome.storage.sync.get('buttonState', function(data) {   
    // this is called after the retrieve.
    count = data['buttonState'];
});

没错，您需要使用storage.local-您还需要考虑尚未存储的值，因此最简单的方法是使用get函数的默认值功能：

function handler() {
    chrome.storage.local.get({count: 0}, function (result) {
        var count = result.count;
        var property = document.getElementById('buttonclick');
        if (count == 0) {
            property.style.backgroundColor = "#4f8ff7"
            property.innerHTML = "<span>Enable control</span>"
            count = 1;
        }
        else {
            property.style.backgroundColor = "#a84237"
            property.innerHTML = "<span>Disable control</span>"
            count = 0;
        }
        chrome.storage.local.set({count: count});
    });
}

没错，您需要使用storage.local-您还需要考虑尚未存储的值，因此最简单的方法是使用get函数的默认值功能：

function handler() {
    chrome.storage.local.get({count: 0}, function (result) {
        var count = result.count;
        var property = document.getElementById('buttonclick');
        if (count == 0) {
            property.style.backgroundColor = "#4f8ff7"
            property.innerHTML = "<span>Enable control</span>"
            count = 1;
        }
        else {
            property.style.backgroundColor = "#a84237"
            property.innerHTML = "<span>Disable control</span>"
            count = 0;
        }
        chrome.storage.local.set({count: count});
    });
}