0

I am building a Chrome Extension in which I want to edit the style of the web pages I visit by using keypress. I am trying to target all style elements (I tried it now by using *).

I found multiple parts of code online, all of which don't seem to work:

$("*").keypress(function(event){

if(event.which==65 {

$("*").css("background-color", "white");
    }
}

Or:

$( "body" ).keydown(function( event) {

if (event.which == 65  {

$("body").css("color","white");
  }
});

Or:

function changeColor() {

  var color = document.getElementById("color").value;
  document.body.style.background = color;
}
document.querySelector('#color').addEventListener('keydown', function(e) {
  if (e.keyCode === 65) { // enter key
    changeColor("red");
  }
});

The ideal changes would be:

Key press a > change background to white

Key press b > change font to helvetica

Key press c > hide all images

Key press d > hide all text

At the moment I don't get any results at all (while changing the background in css immediately works).

Lieke
  • 9
  • 2
  • Do you understand the code you grabbed from the internet? Examples 1 and 2 use jQuery, and the last requires an element with a `color` id. So those are the reasons each one doesn't work. – Andy Dec 03 '17 at 15:49
  • I understand that I can’t use the third one since I don’t use html but only css en js. But can you tell me how to make the others work? I’m super new to this and totally stuck. – Lieke Dec 03 '17 at 19:09
  • https://stackoverflow.com/questions/21317476/how-to-use-jquery-in-chrome-extension – Andy Dec 03 '17 at 19:11

0 Answers0