Chrome Storage API не работает
Я пробовал посмотреть другие проекты, но до сих пор не понимаю, почему мой проект хранилища Chrome все еще не работает. Я пытаюсь создать расширение Chrome, которое позволяет пользователю вводить что-то в текстовое поле и нажимать кнопку, которая сохраняет информацию и помещает информацию в диапазон. Кроме того, когда я проверяю свое расширение, ошибок нет, поэтому я не совсем уверен, какая часть неправильная.
Вот мой html
<!DOCTYPE html>
<head>
<title>Storage</title>
<script src = "popup.js"></script>
<span id = "box"> </span>
<input type = "text" id = "card">
<button id = "button">Save</button>
Вот мой js
window.onload=function(){
console.info("yay");
chrome.storage.sync.get("text",function(change){
if (change.text){
document.getElementById("box").innerText=change.text;
}
});
if (document.getElementById("button")){
document.getElementById("button").addEventListener("click",function(){
console.info(documengt.getElementById("card").value);
var textBox=document.getElementById("card").value;
console.info(textBox);
chrome.storage.sync.set({"text":textBox});
document.getElementById("box").innerText=document.getElementById("card").value;
});
}
}
Вот мой манифест:
{
"manifest_version":2,
"name": "Storage",
"description": "This extension allows the user to save information in the box",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
]
}
Любая помощь приветствуется!
Вы можете проверить пример - он содержит базовый пример использования API хранилища, как вы пытаетесь это сделать.
При отправке текущая страница заменяется ответом сервера. В вашем случае он просто перезагружает страницу. Измените вход submit на элемент кнопки.
О, хорошо, спасибо за помощь, но по какой-то причине это все еще не работает
Я обновил свой код, а также Сергей, ссылка, которую вы поместили, не работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Убедитесь, что вы добавили это в свой manifest.json
"permissions": [
"storage",
],
Как объяснено в основной таблице из chrome.storage
Permissions: "storage"
Да. Вот мой манифест {"manifest_version": 2, "name": "Storage", "description": "Это расширение позволяет пользователю сохранять информацию в поле", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html"}, "permissions": ["activeTab", "storage"]}
Я думаю, ваша проблема в том, что вы изначально не получаете нужный элемент.
Вы используете document.getElementById ("text"); когда на самом деле нет элемента с id = "text". Ваше текстовое поле ввода на самом деле type = "text", но id = "card".
А также, получение элемента просто получает элемент как объект (он покажет что-то вроде [object HTMLInputElement] вместо текста, который фактически находился внутри поля ввода). Итак, вам нужно использовать .value, чтобы добраться до фактического текста
Еще пара вещей, которые нужно улучшить, ваш новый storage.js должен использовать
- правильный идентификатор элемента («карта»)
- получить значение поля ввода текста
- innerText вместо innerHTML (защищает от XSS)
В готовом виде это выглядит так:
//popup.js
window.onload=function(){
chrome.storage.sync.get("text",function(change){
if (change.text){
document.getElementById("box").innerText=change.text;
}
});
if (document.getElementById("button")){
document.getElementById("button").addEventListener("click",function(){
var textBox=document.getElementById("card").value;
chrome.storage.sync.set({"text":textBox});
});
}
}
Спасибо, MagnetPlant
Обновлено: изменил storage js на popup.js
Хорошо, спасибо, я согласен с InnerText и .value, но я все еще не понимаю, как получить хранилище, потому что я думал, что идентификатор «текст» будет относиться к тому, который находится в хранилище Chrome. В любом случае спасибо за вашу работу.
chrome.storage.sync.get("text"... и document.getElementById("text") - две разные вещи. chrome.storage получает его из хранилища вашего расширения, тогда как getElementById не получает ваше значение из хранилища, он фактически представляет весь элемент <input>. Если я могу быть более ясным, дайте мне знать
Я изменил свой js на вашу окончательную версию и сохранил свой html и мой манифест одинаковыми. Кстати, он просто отображает "// storage html", и я могу изменить его на что-нибудь еще, когда я нажимаю кнопку
nvm я просто меняю его на что угодно, и он все еще ничего не отображает
извините, он не имеет отступа, но все равно не работает. Я также добавил console.info, но единственное, что я получаю в консоли, это yay
Я сделал базовое расширение Chrome, в котором в основном были то, что вы опубликовали, и внесенные мной изменения, и оно работает. Возможно, вы могли бы проверить свой код здесь: github. При первой загрузке всплывающего окна ничего не отображается, но затем вы пишете текст и нажимаете «Сохранить», а в следующий раз, когда вы открываете всплывающее окно, там отображается сохраненный текст.
Вы проверяли свой код на это? https://github.com/turquoise-turtle/49503172
Это сработало? Если нет, могу я увидеть немного больше вашего кода, чтобы узнать, что еще может сделать его неработающим
извините занят в эти дни. Работаю над другим проектом. Это нормально, что вся помощь мне нужна. Спасибо! Я отмечу как правильный, если он сработает через несколько дней.
Не могли бы вы опубликовать свой манифест? Кроме того, разве
val()не jQuery, а не простой js?