Пишу расширение для браузера. Имеется скрипт, который анализирует страницу с объявлениями на наличие дублирующих номеров. Проблема в том, что при переходе на следующую страницу с объявлениями скрипт запускается по новой. А мне необходимо, чтобы он не запускался заново, а продолжал работать. И таким образом он сможет определять дублирующие номера не только на одной странице, а и на последующих.
Может есть идеи как реализовать.
Заранее спасибо.
Если скрипт должен анализировать дублирующиеся номера только в рамках одного домена, тебе стоит посмотреть в сторону localStorage. Данные в этом хранилище доступны в рамках одного домена после перезагрузок страницы. Складывай в него все найденные номера и при каждом новом запуске скрипта (считай на последующих страница) считывай и записывай данные в localStorage.
Спасибо за идею. Однако, у меня почему-то отрабатывает не так как ожидалось.
Вот код, работающий в этом расширении
var numberElems = document.getElementsByClassName('ner-auto-tel');
var textContentElem = [];
var textContentElemFinal = [];
for (var i = 0; i < numberElems.length; i++) {
textContentElem.push(numberElems[i].textContent);
}
sessionStorage.setItem('textContentElem', JSON.stringify(textContentElem));
var textContentElemWithoutStorage = JSON.parse(sessionStorage.getItem('textContentElem'));
localStorage.setItem('textContentElemFinal', JSON.stringify(textContentElemFinal));
var textContentElemFinalWithoutStorage = JSON.parse(localStorage.getItem('textContentElemFinal'));
textContentElemWithoutStorage.forEach(function(item, j) {
if (textContentElemFinalWithoutStorage.indexOf(item) === -1) {
textContentElemFinalWithoutStorage.push(item);
}else{
numberElems[j].style.backgroundColor = 'red';
numberElems[j].style.color = 'white';
}
});
Единственное, что я решил вместо localStorage использовать sessionStorage. Но отличий в работе скрипта не наблюдается.
Так вот. Я ожидаю, что скрипт будет наполнять необходимые мне массивы и при переходе на другую страницу они будут увеличиваться, а получается при переходе на вторую страницу у меня создается новый массив. Я наверняка что-то упустил. Подскажите что именно? Как поправить?
Тебе надо при каждой загрузке не заново создавать список как ты делаешь:
а восстанавливать значение из sessionStorage вот так:
var textContentElem;
try {
textContentElem = JSON.parse(sessionStorage.getItem('textContentElem'));
} catch (err) {
textContentElem = [];
}
UPD это не единственный момент, который я описал. Идея, которая не реализована - восстановление значений из sessionStorage в переменные прежде чем переменные будут изменены. В конце скрипта значения из переменных надо заново записать в sessionStorage.
После определенных проб и попыток у меня вышла такая ситуация. Дима, я понял саму идею, которую ты мне хотел донести, однако реализовал ее по другому. Не через try...catch. Так как у меня при try выводило значение null в самом начале.
В общем вот код, которым я реализовал это.
var phoneNumbersElem = document.getElementsByClassName('ner-auto-tel');
arrayOfAllNumbers = JSON.parse(sessionStorage.getItem("allNumbersArrayStorage"));
if (arrayOfAllNumbers === null) {
arrayOfAllNumbers = [];
};
arrayOfUniqueNumbers = JSON.parse(sessionStorage.getItem("uniqueNumbersArrayStorage"));
if (arrayOfUniqueNumbers === null) {
arrayOfUniqueNumbers = [];
};
for (var i = 0; i < phoneNumbersElem.length; i+=1) {
arrayOfAllNumbers.push(phoneNumbersElem[i].textContent);
}
arrayOfAllNumbers.forEach(function(item, j) {
if (arrayOfUniqueNumbers.indexOf(item) === -1) {
arrayOfUniqueNumbers.push(item);
}else{
document.getElementsByClassName('ner-auto-tel')[j].style.backgroundColor = 'red';
document.getElementsByClassName('ner-auto-tel')[j].style.color = 'white';
}
});
sessionStorage.setItem("allNumbersArrayStorage", JSON.stringify(arrayOfAllNumbers));
sessionStorage.setItem("uniqueNumbersArrayStorage", JSON.stringify(arrayOfUniqueNumbers));
Однако теперь проблема в другом. Он отрабатывает у меня на первой странице отлично. А когда перехожу на вторую, то отказывается применять свойство style. Выдает следующую ошибку: Uncaught TypeError: Cannot read property 'style' of undefined.
Почему так происходит? Ранее, когда я работал без sessionStorage он закрашивал все элементы, а сейчас отказывается делать. Я так понимаю, что я обращаюсь не к тому элементу, чтобы закрасить его? В чем проблема?
arrayOfAllNumbers в sessionStorage (и следовательно восстанавливать от туда).Полно:
Проблемы типа “Uncaught TypeError: Cannot read property 'style' of undefined” решаются разбором того, почему выражение “ВЫРАЖЕНИЕ” перед точкой в записи ВЫРАЖЕНИЕ.style вычисляется в undefined.
В конкретно твоем случае проблема в том, что цикл
arrayOfAllNumbers.forEach(function(item, j) {
// ...
document.getElementsByClassName('ner-auto-tel')[j]
// ...
});
предполагает, что индексу j будет соответстовать j-ый как номер, так и узел, из которого взят номер. При первом запуске код отрабатывает корректно, потому что arrayOfAllNumbers пуст, и соответственно код
for (var i = 0; i < phoneNumbersElem.length; i += 1) {
arrayOfAllNumbers.push(phoneNumbersElem[i].textContent);
}
Отрабатывает так, что каждому i-му номеру из массива arrayOfAllNumbers соответствует i-ый элемент из phoneNumbersElem. При последующих запусках скрипта arrayOfAllNumbers начинает отчет не с пустого массива, а из восстановленного из sessionStorage.
Совет от меня - упростить код, избавившись от повторяющихся действий (одинаковые выборки, повторные проходы цикла). И не забывай объявлять переменные с var
'use strict';
var phoneNumbersElem = document.getElementsByClassName('ner-auto-tel');
var arrayOfUniqueNumbers = JSON.parse(sessionStorage.getItem("uniqueNumbersArrayStorage"));
if (arrayOfUniqueNumbers === null) {
arrayOfUniqueNumbers = [];
}
for (var i = 0; i < phoneNumbersElem.length; i += 1) {
if (arrayOfUniqueNumbers.indexOf(item) === -1) {
arrayOfUniqueNumbers.push(item);
} else {
phoneNumbersElem[i].style.backgroundColor = 'red';
phoneNumbersElem[i].style.color = 'white';
}
}
Спасибо большое. Сделал необходимые правки и все заработало. Спасибо за советы и подсказки)