Uncaught Error: Extension context invalidated when calling chrome.storage.local.set in mousemove event

can you help me again with this problem? I am getting error Uncaught Error: Extension context invalidated. in chrome://extensions.

I am trying to make a timer that whenever you we're idle let's say 5 seconds an alarm will trigger and you need to move your mouse to stop the alarm and I need to sync it with other opened tabs that's why I am using chrome.storage.onChanged.addListener as per the recommendation of wOxxOm thankyou. It works perfectly fine but I am getting this error.

*manifest.json*

{
  "manifest_version": 2,

  "name": "Toool",
  "description": "Description ....",
  "version": "1.0.0",
  "icons": { "128": "icon_128.png" },
  "permissions": ["activeTab", "storage"],
  "content_scripts": [
    {
      "matches": [
        "*://*.google.com/*"
      ],
      "css":[
          "bootstrap/css/bootstrap-iso.css",
          "css/animate.min.css", 
        "css/all.css",
        "css/style.css"
      ],
      "js": [
          "js/jquery.min.js",
          "js/contentscript.js"
       ]
    }
  ],
  "web_accessible_resources": [
    "index.html",
    "audio/*",
    "webfonts/*"
  ]
}

*contentscript.js*


// So here is what I've been working so far..
//Instead of popup, I am using this to inject html directly to the DOM.

$('body').prepend('<div class="idletimer-element bootstrap" style="display: block"></div>');

$.get(chrome.extension.getURL('index.html'), function(data) {
    $(data).appendTo('.idletimer-element');
});


    var audio_url = chrome.runtime.getURL('audio/bells.mp3');
    var audio = new Audio(audio_url);

    var timerStartIn = 6;
    var timer = -1;
    var idle = null;
    var timeOut = null;
    var MouseMoved = 0;

    //Initialize the mouse storage value
    chrome.storage.local.set({"mouseStorage": MouseMoved}, function() {
        console.log('Mouse Moved: ' + MouseMoved);
    });


    $(document).on('mousemove', function(){

 // I used validation here to just execute it when necessary but the problem didn't fix it at all :(

        clearTimeout(timeOut);

        if(MouseMoved == 0){
            MouseMoved = 1;

            chrome.storage.local.set({"mouseStorage": MouseMoved}, function() {
                console.log('Mouse Moved: ' + MouseMoved);
            });
        }

        timeOut = setTimeout(function(){

            MouseMoved = 0;
            chrome.storage.local.set({"mouseStorage": MouseMoved}, function() {
                console.log('Mouse Moved: ' + MouseMoved);
            });

        }, 1000);

    });

    chrome.storage.onChanged.addListener(function(changes, namespace) {

        if(changes['mouseStorage']){
             IT();
        }
    });

    function IT(){

        clearInterval(idle);
        timer = -1;

        audio.pause(); // Stop playing
        audio.currentTime = 0; // Reset time

        timerStartIn = 6;
        $('.timer').html('User is active');
        $('.timer-content i').removeClass('animated shake infinite');
        $('.it-status').html('<span> <strong>Reviewer Status: </strong> <span class="active m-r-10">Active</span></span>');

        idle = setInterval(function(){

            timer++;
            //console.log(timer);

             timerStartIn--;
            $('.timer').html('User is active. <br> Idle starts in ' + timerStartIn + ' second/s');

            if(timer >= 5){
                //Idle
                //console.log('Idle');

                $('.timer').html('You are idle for about <br> ' + secondsToHms(timer - 5) +'.');
                //console.log(timer);
                audio.play();
                $('.timer-content i').addClass('animated shake infinite');
                $('.it-status').html('<span> <strong>Reviewer Status: </strong> <span class="idle m-r-10">Idle</span></span>');

            }

        }, 1000);
    }