Get HTML element via aria label

Question

I'm making a small chrome extension and for it I need to grab a div from the DOM to manipulate. I get the DOM but I'm having trouble grabbing the required div. Here's the code for it.

<div id=":ik" class="Am Al editable LW-avf" hidefocus="true" aria-label="Message Body" g_editable="true" role="textbox" contenteditable="true" tabindex="1" style="direction: ltr; min-height: 137px;"><br></div> 

I've tried getElemenyByID, and document.attrib but both return null. Any advice on how to get the value of the text that will be input inside this div?

Answer 1

querySelector or querySelectorAll with an attribute selector should do it:

// The first element that matches (or null if none do): var element = document.querySelector('[aria-label="Message Body"]'); // A list of matching elements (empty if none do): var list = document.querySelectorAll('[aria-label="Message Body"]'); 

Or if that ID is stable, simply:

var element = document.getElementById(":ik"); 

(Note that the d is lower case; you have it in upper case in your example.)

Either way, make sure your code doesn't run until the page is loaded, by including this in your manifest:

"run_at": "document_end" 

(A little) more in this answer, which references this Google documentation.