Я делаю расширение 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>

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;
        }
    }
0
Ayush Goyal 30 Дек 2017 в 12:42

2 ответа

Лучший ответ

Если я правильно читаю ваш код, вы используете «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'];
}
1
Bob Aleena 30 Дек 2017 в 11:01

Вы правы, что вам нужно использовать 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});
    });
}

Вы можете оптимизировать, не удосужившись установить счетчик и просто используя

chrome.storage.local.set({count: 1 - count});
0
Troy Wray 30 Дек 2017 в 17:48