How to remove an event listener via Chrome extension

Question

I need to remove the following event listeners with my Chrome extension, after the page loaded.

Page content:

<input type="password" size="15" value="" autocomplete="off"
    onkeyup="javascript:vaciar(this)"
    onkeypress="javascript:vaciar(this)"
    onkeydown="javascript:vaciar(this)" name="password"
id="contrasena" />

The code in my content script is:

var password_field = document.getElementById("contrasena");
password_field.removeAttribute("onkeypress");
password_field.removeAttribute("onkeydown");
password_field.removeAttribute("onkeyup");
password_field.onkeypress = null;
password_field.onkeydown = null;
password_field.onkeyup = null;

For some reason, the event listeners keep active, but when I copy and execute the code in the console it works.

score 2 · Accepted Answer · edited May 23 '17 at 12:05

2

This fails because of the isolated context that context scripts live in.

To affect handlers set by the page's context, you need to inject the above code into the page.

See this question for a canonical explanation and examples.

edited May 23 '17 at 12:05

Community

1
1

answered Aug 20 '14 at 15:00

Xan

74,770
16
179
206

score 0 · Answer 2 · answered Aug 20 '14 at 15:07

Are you putting your reset code in a body/onload function?

‹body onload="resetInput();"›
    ‹input type="password" size="15" value="" autocomplete="off" onkeyup="vaciar(this)" onkeypress="vaciar(this)" onkeydown="vaciar(this)" name="password" id="contrasena" /›
‹/body›

And declare the function

function resetInput(){
    var password_field = document.getElementById("contrasena");
    password_field.removeAttribute("onkeypress");
    password_field.removeAttribute("onkeydown");
    password_field.removeAttribute("onkeyup");
}

You don't need to unbind your event while they are inline events.

How to remove an event listener via Chrome extension

2 Answers2