First, please, add <!DOCTYPE html> to the beginning (before <html>) of any (full) HTML file you are creating. By not declaring a document type, you make the browser load the page in compatibility or quirks mode, which does many non standard and unexpected stuff that would not always work (mainly about the width and height of elements, but also other stuff). This mode was created for all of the legacy content of the web (old pages that relied on the buggy behavior of the first versions of the browsers).
Second, you cannot access the popup of the browser action if it is not opened (meaning, if the user has not clicked on it).
You have a few choices here.
1. In a background or event page (or wherever), save whatever data you want to later fetch using the
chrome.storage API and in the popup page, use the chrome.storage API to fetch the data.
2. Use an event page (a non persistent background page), access it using the asynchronous chrome.runtime.getBackgroundPage(function (windowOfTheBackgroundPage) { document.querySelector("#me").innerHTML = windowOfTheBackgroundPage.getSomethingFromTheBackgroundPage(); });
3. Use a persistent background page and in the popup page, access it using chrome.extension.getBackgroundPage() (which returns the window object of the background page) and take any data you want from it.
Third, I am not sure the DOMContentLoaded has anything to do with Content Security Policy. The point of Content Security Policy is to not let the page run unsafe scripts, like new Function("..."), setTimeout("..."), eval("..."), inline scripts, inline event handlers and maybe a few more, because the user can inject stuff to the page using these and that could become a security or privacy issue, so you must extract all of your scripts to an external JavaScript file (or files) and reference it using <script src="some-path-to-javascript.js"></script>.
Regardless, the DOMContentLoaded event listener could be needed, if you reference the script (which means the browser executes the script) before the content on which your script depends loads (for example, you have a page with the following snippet - <script src="bla.js"></script><div id="me"></div> - and bla.js tries manipulates <div id="me">, but it is executing before that element is parsed, because the script element was located above or before that element, so the script throws an exception due to a null reference error, since no such element exists at the time).
The quick solution to that is to simply locate the script element at the end of the <body> (for example) and you can avoid the event listener altogether (unless you depend on other behaviors that only occur when the browser declared that the content was parsed).