How do you access element on unopened page with javascript without JQuery?

Question

I am trying to build a chrome extension that needs to access the value of a specific <p> tag off an html element using document.getElementById without opening or loading the page. For example, I might want to see what the placeholder for the search bar is on the google homepage using the id of "input."

Image of google search bar example

Assume the placeholder value will change. I want to get the placeholder without having to open the chrome new tab everytime I want to access the information.

I think this can be done using the chrome extension background script/service worker (I'm using manifest 3), but I'm unable to figure out how to do this. I am also open to any plain javascript ways to do this.

In addition, I found this question that said to use JQuery (which i want to avoid but will use as a last resort) or using some code that didn't work for me. I also found this article about using background script in chrome extensions but it is geared towards putting data into a form instead of taking data out of label and is in manifest 2.

So far the only code I have is getting the request and opening the page. I am unsure what to do next to get the specific element.

var request = new XMLHttpRequest();
request.open("GET","http://www.example.org/example.txt");

Answer 1

In the question that you linked, the answer provided a set of instructions to complete the task using JQuery, but you can just use vanilla javascript. You only need to change step 1, 6 and 7.

1: Get HTML from the page using a get request with XMLHttpRequest instead of $.get()

6: Serialize the form data using FormData instead of .serialize()

7: Post serialized data using a post request again with XMLHttpRequest instead of $.post() and have a function to get the response.