Chrome.storage.onchnage无法正常使用Chrome扩展 [英] Chrome.storage.onchnage doesnot working Chrome extention
本文介绍了Chrome.storage.onchnage无法正常使用Chrome扩展的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发Chrome扩展程序，该扩展程序可在用户单击图像图标时更改鼠标光标.一切正常，但是当我选择第一个图标就可以了，同时，当我选择第二个图标时，没有任何变化，第一个图标仍然有效，但是只有在重新加载页面后，第一个图标才消失，第二个图标可以工作.我发现chrome.storage.onChanged函数可以解决此问题，我使用了此函数，但我认为我没有正确使用此函数.谢谢你的帮助.
I developing Chrome extention which is responlble to change mause cursor when the user click image icons. everything works well but when i choose the first icon is it ok , at the same time when i choose the second icon nothing changes and the first icon still works, but only after reload page the first icon is desapeared and second icon works. i find chrome.storage.onChanged function who can resolve this problem and i used this but i think i dont use this function correctly. thanks for help.
这是我的代码
popup.html:
popup.html:
<div class="cursor-container">
<!--start cursor colors pannel-->
<div class="cursor-colors-icons grid">
<p>Colors:</p>
<div class="flex-container">
<div ><img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAI8SURBVEiJrdI7aFNhFMDx//e69yZVKKLi4urgVKjg4CLFV1G6SJUG0dGlUAdx8YWDQ5ei4FBEqKgYvNhqi4MogsUHbax0SjfRVh0EkVgavWken0MTaZOb9IbmbPd83zm/e+654vjLIJ3P5rcqRw2NdccGaXGIvmn7LJcJjuYyAdKonPb040KxcG7i2OafrQGm7EEEL3KZgFwmWElKYXXMpKwRA08PxaY3BFhrSaRIA7tXI5XQrv4mPXN97LA7vBHgLDAMEIYASCP/aFff1/HseX//tqWmgJ6PxDcV+QpsaYQASClKMqYnHWn6/W5nLhIAkEgxCFyoHDRCVipBu/qTcNTlJ0diyXWBvg/sFJbPgIqMlEM56rdy5G2dbbvk97IcCpSn8IHe1ReiIgBCy4J29HMZl/2jXd58DXBqhn2lEm+rC5tBViTQnk4bowfWAOUpZoDODSOA1CqQ1UlruRl22W33cNu9aI2N+qvj5rX2ZE/NBCfmcPQS88COsOLQSQRIo35pV70SxgyNHjBT/4+qAYDENFcQXKv3hhVESlHSbU5SuOJiZanVEQqcfs/2gmYBcOshy4vBOyntSb8r9r3enboAQCLFXeBMnbof0rLrwV4WGzUHqFlyJawMX3Y5rkZp3hBI7mEWeBNylHcdHkVp3hAAEIIbNUnL5EgHmZYA+S+MA2v+DiEYj9p8XcDvpWgtt9agiomWAQCeyx0gW36c9TtZaCkw0kHGwj0AS3OfJxIAoIsMAWlpedgs8A/JG/nUAUXCRQAAAABJRU5ErkJggg==" /></div>
<div ><img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABDlBMVEUAAAABxA8B5g8C0BAA/wAAkA8C8hAB1xAA0xYAkQ4C+RAB3RAAzBEA/wAAkA8B5g8Czw8AkA4C7RAC1hAAxhwAmRoAkA8C9hAB3BEAyhMAjw8B4xAAzw8AlBAAkA8C7BAC1BEAvwAAkA8C9Q8B2hAAyA4AkBAB3xAAzQ4AkA8AkRAC7RAB2hAAzBEAkgAAkA8C6xAAxxMAjxAC7hAC0w8AzBQAlQsAkA8Bvw8A0QAAjxAAkA8AmQAAkQ8Ajw4AkA4AkA8AiRQAjw8AqgAAkA8Ajw8AkQ8AkA8AkhIAlg8AkA8AkA8AkA8AkA4AkA0AkA8AjwwBxA8C/xAAkA8C/hAC/BAByA8C+hAC/RAAAACAO1JEAAAAUXRSTlMA6et8Arf6rhdI/tA8Adbodmr2oxIK7f3HNYvjZR/79ZkIrP3AJT7VSM5f9b9LB+fxN4D2lhkY+b4Los8FM1vD+A1UA95pdv4cEfTMl34n6SlsWPHfAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB+QCBQkrHGG/ys8AAADQSURBVCjPbdJnW8IwEAfwMkoZKpuCouy9ZAniYO/ZOxC+/yeBppau5F3u9+RJ7n9hTGaLlaEtVgAbZ6eAAwUAp+vBAI9PosDR7dGLF4kA+PwBDQRDsgAfjqjlGe8Cp5eoAq9vKgGIxROyJFEjkEpnJMiKgH+KwDmXJ1IwCPAEiqiTUrlCoFqThNxzeefq94c1UD7TbLXVrXx0/qX7qculJ9W/vvWB/Ujwa0y/L9YHQyOMRGAp8xpPbjCljXiGOF/QYLnCNfVTMBvc0mG3P6i3V7PlRZJRRmIrAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTAyLTA1VDA5OjQzOjI4KzAwOjAwr8A2ZgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wMi0wNVQwOTo0MzoyOCswMDowMN6djtoAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC" /></div>
<div ><img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABCFBMVEUAAACeAgKpAwOiAgL/AACLAACtAwOjAwOmAACOAACwBASnAgKiAAD/AACLAACpAwOgAgKMAACrAwOkAwOcAACAAACMAACvBASnAwOfAACLAACpAwOiAwOMAACMAACrAwOlAgKfAACLAACuBASlAwOYAACMAACmAgKfBASMAACMAACsAwOmAwOjAwOSAACMAACrAwOeAACLAACsAwOjAgKjAACKAACMAACcAQGiAACMAACMAACZAACMAACMAACMAACMAACJAACMAACqAACMAACNAACMAACMAACJAACHAACMAACMAACMAACMAACJAACMAACPAACeAgKyBASMAACxBASfAgKwBAQAAADmatffAAAAUXRSTlMA6et8Arf6rhdI/tA8Adbodmr2oxIK7f3HNYvjZR/79ZkIrP3AJT7VSM5f9b9LB+fxN4D2lhkY+b4Los8FM1vD+A1UA95pdv4cEfTMl34n6SlsWPHfAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB+QCBQksIAGRII8AAADGSURBVCjPbdLVFsIwDAbg4e7u7u7u7pAA7/8osJXB2Nq75js9bf6UkckVSoa2VDdQa7QU0OENQG8wSsBkZgXAYhWLDYmA3eH8A5ebF/B4fULx41fgHgj+IBQWCEAkGuMljn8CiWSKQJoFfPwEnpksJzmJQIKDPIqkUCxxUK4Q4e65VzW178PqyJ9pNFvCVtqdj3R7olz6pD4YigMbERhL05+w9elMCnMWVJR5LZZvWNFGvEbcbGmw2+OB+imYI57ocL5chdsXsqlFktODBpYAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMDVUMDk6NDQ6MzIrMDA6MDAlxnLPAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTA1VDA5OjQ0OjMyKzAwOjAwVJvKcwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAASUVORK5CYII=" /></div>
<div ><img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABDlBMVEUAAACy5gq/8Q+16gr//wCg1wHD9RC67Ay89Auf2ADG9xK87w2z6gn//wCg1gG+8g646Quh1gDB9BC57g248Q6ZzACg1wHG9xG88A235wqg1wK+8A+46wqc1gCg1wHC8xC57Qy/3wCg1wHE9hG67g2z6geg1gC87g216gug1wHF9xGh1wDC9BC77gy46wqS2wCg1wHB8hC14wmf1wDC9BC47Ay46wqf1QCg1wGx5gm56ACh2AKg2AGZzACg1wCg2ACg1gGg1wGd2ACh2ACq/wCg1wGg2ACg1gCg1wGk2wCl0gCg1wGg1wGg1gKg1wCd2ACg1wGi2gCy5wrI+ROg1wHH+RPH+BO06ArG9xIAAAA5yFfgAAAAUnRSTlMA6et8Arf6rhdI/tA8Adbodmr2oxIK7f3HNYvjZR/79ZkIrP3AJT7VSM79X/W/Swfn8TeA9pYZGPm+C6LPBTNbw/gNVAPeaXb+HBH0zJd+J+kp1xgmrAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkAgUJLgroHIvbAAAA0ElEQVQoz23SZ1vCMBAH8DJKGYJsZMsGcSB7742A9M7K9/8k0tTSlbzL/Z48yf0vjMlssTK0xfJg4+wUcCAP4HQ9GMDtEQV+Hr168SERAH8gqIFQWBaIPEXVEsO7gBBPKJBMqQQg/ZyRJYsagVy+IEFRBPxVBK6lMpGKQeCFQBV18vr2TuCjJgm5R/jk6veHNVA+02y11a10uv/S6+tyGUj14Ugf2FiCiTH9qVifzY2wEIGlzGu5usGaNuIN4nZHg/0Bv6ifgjniiQ7n74t6+wfP2UZ5aXzTbgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wMi0wNVQwOTo0NjoxMCswMDowMPSJtKYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDItMDVUMDk6NDY6MTArMDA6MDCF1AwaAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==" /></div>
<div ><img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABC1BMVEUAAABVAY1OAH5SAIgAAIBiAaZLAHhRAIVZAJBjAKZJAHVQAIJRAIgAAP9iAaZPAH5SAIZjAKZMAHpRAIdVAI5mALNiAaZLAHZPAIRXAIxhAqVPAH9TAIhjAKViAaZNAHtTAIdgAJ9iAaZLAHdQAIJMAINjAKVQAIFVAIdiAaZjAKZMAHtRAIRVAIttALZiAaZMAH1TAItiAKVNAHpTAIZcAI9gAKpiAaZXAZBdAItiAqVjAaZmAJlkAKViAKViAaZiAaZiAJ1hAKdVAKpiAadhAKVhAKZiAaZkAKRpAKViAaZiAaZiAqVhAKZiAKNiAaZkAKhWAY5IAHJiAaZIAHNVAIxJAHRJAHMAAAAXOwsJAAAAUXRSTlMA6et8Arf6rhdI/tA8Adbodmr2oxIK7f3HNYvjZR/79ZkIrP3AJT7VSM5f9b9LB+fxN4D2lhkY+b4Los8FM1vD+A1UA95pdv4cEfTMl34n6SlsWPHfAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB+QCBQktGDCIqVAAAADTSURBVCjPbdLZVsIwEAbggpSCCrKKIoJQ3NjdAEF2RZC1M6Dv/yaaxLZpk9xlvpOTzD9RPN4DnyJbqgF+LSCBIBoAh0fHAoTCRABOIm6JIhOIxRMOSJ6aAqmzc17SaAnsLjI2XGY5Achd5U0poENAL14zuCGAe1vg+/aOyr0goFMooVN25UqVQq3OhN7z09AerIc9onnm6fmFb6XZ+pf2qyuXDqt339yB9Rj0xfQHpD4ciTAmoErmNXn/gw/ZiKeInzMZzL9wIf0UyhJXclhvtvz2F7hXRZckfgsmAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTAyLTA1VDA5OjQ1OjI0KzAwOjAwZX4sVQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wMi0wNVQwOTo0NToyNCswMDowMBQjlOkAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC" /></div>
</div>
</div>
popup.js:
$(document).ready(function(){
$(document).ready(function() {
let icons = document.getElementsByClassName('icon');
for( let icon of icons){
icon.addEventListener('click',function(){
let imgSrc = icon.src;
chrome.storage.local.set({key: imgSrc});
})
}
})
content.js:
content.js:
chrome.storage.onChanged.addListener(function(changes, namespace) {
for (var key in changes) {
var storageChange = changes[key];
chrome.storage.local.get(['key'], function(result) {
$("body").css('cursor', `url(${result.key}) 1 1, auto`);
});
}
});
推荐答案
除了onChange之外，您还需要chrome.storage.local.get来获取脚本启动时的值，因为onChange是仅在值更改时触发的事件在存储中.
You need chrome.storage.local.get to get the value on script start in addition to onChange because onChange is an event that only triggers when the value is changed in the storage.
function setCursor(url) {
$('body').css('cursor', `url(${url}) 1 1, auto`);
}
chrome.storage.local.get('key', result => {
setCursor(result.key);
});
chrome.storage.onChanged.addListener(changes => {
if (changes.key) {
setCursor(changes.key.newValue);
}
});
这篇关于Chrome.storage.onchnage无法正常使用Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
