1

I am trying to create a chrome extension that will search for any elements from the web-page.

Currently i am using, var elm = document.getElementsByTagName("input");

This gives me all the elements with tag input.

But sometimes the element is not visible in the screen but present in the source code, for that if i want to filter i try to use the offsetwidth , left, right , height properties

elm.offsetWidth but it always gives 0 so i am not able to filter out.

Also those elements don't have any visibility attributes which i can use.

Is there any other way i can do it using Javascript ?

mk_
  • 164
  • 1
  • 14
  • Try getBoundingClientRect – wOxxOm Apr 13 '18 at 11:46
  • It is not clear enough to me. How exactly do you decide if element is visible/not visible in your code, based on what condition(s)? – Matus Dubrava Apr 13 '18 at 11:54
  • @wOxxOm getBoundingClientRect is returning top,bottom, left and right values if the element is visible on the screen and i can use it to solve my problem. Thank you so much – mk_ Apr 13 '18 at 12:15

1 Answers1

1

The trick is to filter for element.offsetWidth !== 0 || element.offsetHeight !== 0 to determine an element is visible.

So, in your example, use this:

var elm = [...document.querySelectorAll('input')]
   .filter(x => x.offsetWidth !== 0 || x.offsetHeight !== 0)
Patrick Atoon
  • 749
  • 7
  • 8