Chrome Extension: Get element from page and show it in the popup

Question

Im making my first chrome extension.

I want to get this meta tag from a page:

<meta property="og:description" content="Description text...">

But im getting this error: TypeError: Cannot read properties of null (reading 'getAttribute')

The problem is not the element but the popup.js. I dont have the acces to the DOM of the page unlike content.js. So my question: how to get data from the DOM and pass it to my popup.html?

This is what I tried:

popup.js

document.addEventListener('DOMContentLoaded', (event) => {
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
        desc = document.querySelector("meta[property='og:description']").getAttribute('content')  
        console.log = desc;
    });
});

popup.html

<html lang="en">
    <body>
        <p id="desc">N/A</p>
    </body>

    <!-- scripts -->
    <script type="text/javascript" src="popup.js"></script>
</html>

manifest.json

{
    "update_url": "https://clients2.google.com/service/update2/crx",
    "manifest_version": 3,
    "name": "Test",
    "version": "0.0.1",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "popup.js"
            ]
        }
    ],
    "action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}

Chrome Extension: Get element from page and show it in the popup

0 Answers0