Is there a way for a Chrome Extension popup to access the page’s html information?

I want to get a variable from a page’s html to load an url with this variable on a new tab. As I am a begginner, I followed Google’s “Getting Started” tutorial in which they build an extension that works as popup and I am building around it.

The code that gets the variable works perfectly when I test it on the console, but when I click the button it says “Uncaught TypeError: Cannot read properties of null (reading ‘getAttribute’)”. I imagine it happens because the popup has a separate html, so the javascript is not injected into the page I want.

Is there a quick fix to make the popup access the page’s html? If not, how could this feature work in another way?

// Get variable

const client = document.querySelector('[data-client-id]').getAttribute("data-client-id");

// When button is clicked, open new tab and paste URL 

var button = document.getElementById("btn1");
button.addEventListener("click", function () {
    chrome.tabs.create({ url: "https://www.huggy.app/panel/contacts/" + client });
});