How can i override a jquery function on chrome bro…

I have this website where i take notes from. Currently i have to manually type all my notes. They have disabled the right context menu. I have added a chrome extension that can run javascript on the page, but i am not able to override their function that overrides the context menu. Here is what they have on the page.

$(document)[0].oncontextmenu = function() { return false; }
$(document).mousedown(function(e){
    if( e.button == 2 ){
        alert('Sorry, right click is disabled! Please consider typing');
        return false;
    }else if(e.button == 27){
        exitFullscreen();
    }else{
        return true;
    }
});

$('body').bind('cut copy paste', function (e) {
    e.preventDefault();
    alert('Sorry, consider typing');
});       

$("body").on("contextmenu",function(e){
    alert('Sorry, consider typing');
    return false;
});

How can i disable it using some simple javascript. I have tried to override the context menu and set it to null, but it does not seem to be working

Answer

You can use jQuery off() and a new function for document.oncontextmenu that returns true instead of false

I’ve wrapped these in a button click handler just to show the original code blocking the context menu and keyboard copy and being reset when you click on the button

$('#reset-btn').click(() => {
  // code to use in your extension
  $('body').off('contextmenu cut copy paste')
  document.oncontextmenu = () => true;
  $(document).off('mousedown');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:2000px; background:yellow">
  <button id="reset-btn">Reset Context Menu</button>
  <p>Some text to copy</p>
</div>

<script>
  /*******   Original site code *****/
  $(document)[0].oncontextmenu = function() {
    return false;
  }
  $(document).mousedown(function(e) {
    if (e.button == 2) {
      alert('Sorry, right click is disabled! Please consider typing');
      return false;
    } else if (e.button == 27) {
      exitFullscreen();
    } else {
      return true;
    }
  });

  $('body').bind('cut copy paste', function(e) {
    e.preventDefault();
    alert('Sorry, consider typing');
  });

  $("body").on("contextmenu", function(e) {
    alert('Sorry, consider typing');
    return false;
  });
</script>

How can i override a jquery function on chrome browser?

Advertisement

Answer