Dom Content not loading in chrome extension manifest version 3

Question

I'm trying to create a Chrome extension in manifest version 3, I want to crawl data from Dom in Chrome Extension. When I load the chrome Extension Dom is not loading so crawling is not possible, after I reload the Dom page then Chrome Extension Crawling works. How to load Dom while opening Extension first time?

popup_script.js

chrome.runtime.sendMessage({ 
message: "get_name"
}, response => {
if (response.message === 'success') {
    document.querySelector('div').innerHTML = `Hello ${response.payload}`;
}
});

background_script.js

chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.local.set({
        name: "Jack"
    });
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && /^http/.test(tab.url)) {
        chrome.scripting.insertCSS({
            target: { tabId: tabId },
            files: ["./foreground_styles.css"]
        })
            .then(() => {
                chrome.scripting.executeScript({
                    target: { tabId: tabId },
                    files: ["./foreground.js"]
                })
                    .then(() => {
                        console.log("INJECTED THE FOREGROUND SCRIPT.");
                    });
            })
            .catch(err => console.log(err));
    }
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log("backgroun")
    if (request.message === 'get_name') {
        chrome.storage.local.get('name', data => {
            if (chrome.runtime.lastError) {
                sendResponse({
                    message: 'fail'
                });
                return;
            }
            sendResponse({
                message: 'success',
                payload: data.name
            });
        });
        return true;
    }
});

Crawling_script.js

const ce_main_container = document.createElement('DIV');
const ce_name = document.createElement('DIV');
const ce_input = document.createElement('INPUT');
const ce_button = document.createElement('DIV');

ce_main_container.classList.add('ce_main');
ce_name.id = 'ce_name';
ce_input.id = 'ce_input';
ce_button.id = 'ce_button';

ce_name.innerHTML = `Hello NAME`;
ce_button.innerHTML = `Change name.`;

ce_main_container.appendChild(ce_name);
ce_main_container.appendChild(ce_input);
ce_main_container.appendChild(ce_button);
chrome.storage.local.set({
    name: document.getElementsByClassName('profile-photo-edit__edit-btn')[0].outerHTML
}, () => {
    if (chrome.runtime.lastError) {
        sendResponse({ message: 'fail' });
        return;
    }

    sendResponse({ message: 'success' });
})
chrome.runtime.sendMessage({ 
    message: "get_name"
}, response => {
    if (response.message === 'success') {
        ce_name.innerHTML = document.getElementsByClassName('profile-photo-edit__edit-btn')[0].outerHTML;
    }
});