javascript - Chrome.storage.onchanged 无法正常工作 Chrome 扩展

Question

我正在开发 Chrome 扩展，它负责在用户单击图像图标时更改鼠标光标。一切正常，但当我选择第一个图标时，可以吗，同时，当我选择第二个图标时，没有任何变化，第一个图标仍然有效，但只有在重新加载页面后，第一个图标才会消失，第二个图标才有效。我找到 chrome.storage.onChanged 函数可以解决这个问题，我使用了这个，但我认为我没有正确使用这个函数。感谢您的帮助。

这是我的代码

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:

$(文档).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.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`);
        });
      }
  });

Answer 1

除了 onChange 之外，您还需要 chrome.storage.local.get 来获取脚本启动时的值，因为 onChange 是一个仅在存储中的值发生更改时才会触发的事件。

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