Different results between chrome console and extension

Question

I made a chrome extension to type a searchstring into a searchbar, which automatically updates a table below it. I've been trying a lot of different things and "keyup" seems to actually trigger the function that updates the table. - Note, that I do not own this website and I have no access to the code!

I am using jQuery to type the string like this:

$("#filter").val("apple").trigger('keyup');

If I put this into chromes console, the searchbar gets filled and the table gets updated without any problems.

If I put it into a chrome extension, it types the text, but it doesn't trigger the update process for the table. If I then click the searchfield and then press an arrow key (for example), the table gets updated.

I used a guide to add jQuery to my extension.

• Is there any permission needed to make this tiny line of code trigger this website's event?

  • Here is my manifest (stackoverflow somehow messes up the formatting here): http://pastebin.com/8B3yV2wE

Answer 1

I answer using vanilla javascript. You can simulate a keypress (in this case keyup) with something like:

var filter = document.getElementById("filter");
filter.value = "apple";
filter.dispatchEvent(new KeyboardEvent("keyup", {
    bubbles: true,
    cancelable: true,
    key: "ArrowUp"
  }));