javascript - chrome.storage 项仅在重新加载页面 Chrome 扩展后更改

Question

我正在开发 Chrome 扩展，当用户单击图像图标时，它负责更改鼠标光标。一切正常，但是当我选择第一个图标时就可以了，同时当我选择第二个图标时，没有任何变化，第一个图标仍然有效，但只有在重新加载页面后，第一个图标消失，第二个图标有效。我不知道我该怎么做。感谢帮助。

这是我的代码

弹出-html：

<div class="cursor-container">
  <!--start cursor colors pannel-->
     <div class="cursor-colors-icons grid">
         <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>

弹出-js：

 $(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});
          })
        }
     })

内容-js：

chrome.storage.local.get(['key'], function(result) {
  $("body").css('cursor', `url(${result.key}) 1 1, auto`);
});

标签： javascriptgoogle-chrome-extensionreload