How to find text-boxes from a Chrome extension

I’m making a Chrome extension and I need it to find any form text-boxes on the webpage.

I first tried doing it in my content script like:

document.getElementsByTag("text");

But it always returns undefined so I’m assuming it’s searching only my_app.html.

My first question is what function should I use: GetElmentsByTag, by name, by className, or with some other function?

My second question is which JavaScript file do I need to search? Other forums with similar problems said you need to access the DOM in another file like background or popup and then send it to the content script with a message and a listener.

Chrome DevTools: Loop through NodeList

On a page, I have a table with multiple rows (mostly 100), each having multiple columns. Every row has an anchor with the class .no-red.

I am using chrome dev tools console to fetch this anchor element using

document.querySelectorAll('.no-red')

This returns me an array

NodeList(100) [a.no-red.selectorgadget_selected, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested
....and so on]

I want to loop inside this list and extract the text of each anchor element.

Here’s a sample of one anchor element

 java 

How do I get the text of all the 100 anchor elements?

CSS selector length causing bugs, what’s the cause?

I have a lot of sass for a larger project spread over different files. The compiler then assembles all selectors with the same css and combines them in one css-selector. Seems good and efficient. However, in certain scenarios my css wouldn’t work and it seemed to be due to selector size.

I found the following: when I use the ‘New Style Rule’-button in Chrome DevTools I can add the following selector, hit tab and insert my css:

a.valign-wrapper:hover i.material-icons,
a.progress-bar:hover i.material-icons,
a.status:hover i.material-icons

However, this second selector doesn’t work. When hitting tab it just disappears (without any feedback), seemingly meaning I can’t use it.

a.valign-wrapper:hover i.material-icons,
a.progress-bar:hover i.material-icons,
a.status:hover i.material-icons,
.select-wrapper.box a.caret:hover::before i.material-icons

What is the cause of this? And also, would you know of a way to fix this? Since I’m using sass I can’t just split the selector onto two lines, since sass will combine them when compiling.