addEventListener in a chrome extension - google-chrome-extension

Question

I'm trying to make a simple domain check before sending an email on gmail. So I wrote the below code:
//debugger;
document.addEventListener('blur', function(event){
var target = event.target;
if (target.name !== 'to' && target.name !== 'cc' && target.name !== 'bcc') return;
console.log(target.name, ":", target.value);
},true); // event listener blur
I can see target.name on console window like "to:","cc:", or "bcc:". However, can not get value at all. Any advice appreciated. Thank you.

Answer 1

(What I believe to be)
The problem
Each time you add an address in recipient's field (to, cc, bcc), a new input field is appended to the element holding the recipient address (e.g. with name="to" and value=<email#addree.ss>). Furthermore, an empty textarea is always appended at the end and its purpose is to capture any new email address you might want to add (convert it to an input field as mentioned before and emptying itself again).
Use case:
You see 3 email addresses in the to field.
You click in the field (so it gains focus).
You click away (so it losses focus).
The following gets logged: to: (i.e. no value).
What actually happens, is that you log the value of the empty textarea at the end of the to field.
The solution:
Every time you catch a blur event related to a recipient's field, act upon (e.g. log) the values of all elements whose name equals the blurred field's name.
I know it doesn't make much sense, so here is an example:
document.addEventListener("blur", function(evt) {
var tname = evt.target.name;
if ((tname !== "to") && (tname !== "cc") && (tname !== "bcc")) {
return;
}
var elemList = document.querySelectorAll("[name='" + tname + "']");
[].slice.call(elemList).forEach(function(elem) {
console.log(elem.name, ":", elem.value);
});
}, true);