Squeak.ru - шаблоны программирования

Не удалось получить значение из chrome.storage.sync.get

Для простого расширения Chrome, которое я сделал, которое находит и заменяет текстовую строку, я пытаюсь добавить возможность добавить звездочку после замененного текста. У меня есть логическая переменная showAsterisk, которая устанавливается в options.js из диалогового окна options.html. Я вижу из консоли, что значение установлено правильно, однако оно не извлекается с помощью chrome.storage.sync.get. Не уверен, что я делаю неправильно. Вот соответствующий код:

manifest.json

"permissions": ["storage"],
"options_ui": {
    "page": "options.html",
    "chrome_style": true
    },

options.html

<h1>Options</h1>
<p><input type="checkbox" id="showAsterisk"> Add an asterisk after each instance of replaced text.</p>
<button id="save">Save</button>
<script src="options.js"></script>

options.js

function save_options() {
  var showAsterisk = document.getElementById('showAsterisk').checked;
  chrome.storage.sync.set({ showAsterisk: showAsterisk }, function() {
    window.close();
  });
}

function restore_options() {
  chrome.storage.sync.get({ showAsterisk: false }, function(items) {
    document.getElementById('showAsterisk').checked = items.showAsterisk;
  });
}

document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);

content.js

var elements = document.getElementsByTagName("*");

var showAsterisk = false;

chrome.storage.sync.get("showAsterisk", function(items) {
    if(typeof items.showAsterisk !== "undefined") showAsterisk = items.showAsterisk;
})

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;

            if (showAsterisk === true) {
              var replacedText = text.replace(/Moda Center/gi, "Rose Garden*");
            }

            if (showAsterisk === false) {
              var replacedText = text.replace(/Moda Center/gi, "Rose Garden");
            }

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

  • Где не восстанавливается? Ваш скрипт options.js загружается в конце, когда документ готов, поэтому вам не нужен прослушиватель DOMContentLoaded, просто вызовите restore_options() напрямую. 30.07.2016
  • В content.js под кодом, который я показал, есть оператор if в сценарии поиска/замены, который либо добавляет звездочку, либо нет. Он не извлекается в content.js, потому что расширение просто использует то, что я установил значение по умолчанию, как в верхней части content.js. 30.07.2016
  • Опубликованный код кажется правильным. Отладка: установите точку останова внутри chrome.storage.sync.get и посмотрите, что произойдет. Убедитесь, что вы используете асинхронный обратный вызов правильно : вне его значение еще не получено. 30.07.2016
  • Спасибо @wOxxOm за предложение. Однако руководство по отладке кажется устаревшим. Когда я открываю инструменты разработчика, вкладки скриптов нет. Я что-то упускаю? 30.07.2016
  • Просто щелкайте по всем панелям и исследуйте множество функций: инспектор инструментов разработки и отладчик — самые важные и удобные средства быстрой и точной диагностики проблем. Кроме того, я не являюсь источником всех знаний, поэтому вы можете найти другие/лучшие учебные пособия и ссылки. 30.07.2016

Ответы:


1

У меня нет проблем с правильной работой расширения.

В инструментах разработчика вы хотите убедиться, что вы открываете фрейм, в котором работает страница параметров, иначе вы будете спрашивать веб-страницу расширений, а не страницу параметров при отладке и тестировании.

Выполнение следующего дает мне false, когда я нажимаю «Сохранить» со снятым флажком в параметрах:

chrome.storage.sync.get({'showAsterisk' : '0'}, function(items){console.log(items.showAsterisk)});

И когда я запускаю это снова, но вместо этого проверяю, я получаю true.

Кажется, данные получаются так, как предполагалось, просто когда вы тестируете инструменты разработчика, вы можете оказаться в неправильном кадре. Даже запустив это на случайной странице, такой как результат поиска Google, я могу получить данные. Однако я получу ошибку, если не переключу кадр, который показывает консоль. Посмотрите на изображение ниже, чтобы понять, о чем я говорю:

Вы хотите это:

изображение того, что вы хотите

Не этот кадр по умолчанию:

картинка того, чего вы не хотите

Изменить:

Ссылка, почему вы не видите звездочки. Я полагаю, это потому, что ваше расширение фактически не внедрялось ни на какие страницы. Я не мог видеть его в списке, когда на веб-странице. Однако я изменил строку разрешений в вашем манифесте на следующее:

"permissions": ["storage","http://*/*","https://*/*"],

Теперь он загружается на веб-страницах:

Расширение Chrome загружено на hackernews

01.08.2016
  • Спасибо за ответ. Я могу повторить ваши результаты. Теперь я вижу, что переменная showAsterisk устанавливается и извлекается правильно, но теперь мне интересно, почему она не работает. То есть звездочка никогда не отображается независимо от значения showAsterisk. Я разместил остальную часть кода из content.js, чтобы показать, как я использую эту переменную. 01.08.2016
  • @ zach4618 Смотрите мое редактирование, похоже, это была проблема с разрешениями, и код просто не вводился. 01.08.2016
  • Изменил настройку разрешений, но все равно не работает. Удалось ли вам заставить расширение фактически заменять текст со звездочкой или без нее в зависимости от настройки? Вот страница, где вы можете проверить: en.wikipedia.org/wiki/Moda_Center 02.08.2016
  • Новые материалы

    API следующего поколения: gRPC n Javascript
    gRPC - быстро развивающаяся технология, которая потенциально может заменить протокол HTTP. Это быстрее, чем традиционные HTTP-вызовы, потому что он отправляет данные в двоичном формате, а не в..

    Ускоренный курс по жадным алгоритмам
    Дай мне, дай мне, дай мне Аудитория Эта статья предназначена для инженеров, достаточно хорошо разбирающихся в программировании, структурах данных и алгоритмах. Он в основном основан на..

    Изучайте Java (Урок 2: Комментарии)
    Как и зачем использовать комментарии в java с примерами Введение: Комментарии — это строки текста в программе Java, которые игнорируются компилятором и используются для добавления..

    Async Await в Swift: легкое управление параллелизмом
    Введение в запуск асинхронного кода Асинхронный код выполняет несколько операций одновременно. Параллелизм необходим при выполнении тяжелых вычислений или сетевых запросов. Однако это может..

    Очистить файлы Program .cache в Ubuntu 20.10
    Очистите кеш за несколько простых шагов! GNU / Linux реализовал эффективное управление хранилищем для своих пользователей. Но заметили ли вы, что в вашей системе Linux заканчивается место,..

    Использование Node.js для чтения действительно больших файлов (часть 1)
    В этом сообщении в блоге есть интересный источник вдохновения. На прошлой неделе кто-то на одном из моих каналов в Slack опубликовал тестовое задание, которое он получил на должность..

    Введение в градиентный спуск и обратное распространение
    Введение в градиентный спуск и обратное распространение Как машинное обучение? Машинное обучение ( ML ) - это исследование компьютерных алгоритмов, которые автоматически улучшаются по..