DOMParser()したオブジェクトでquerySelector()を行うと結果がnullになる


Webページをfetchして、特定のセレクターの内容を取得したいです。  
しかし、下記のコードを実行すると、domTargetがnullとなります。  
どうすればセレクターの内容を取得できるのでしょうか。

[code]

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('.btn').addEventListener('click', clickHandler);
    });
    
    async function clickHandler(e) {
        const data = await fetch('https://www.google.com/search?q=a')
        const html = data.text()
        const dom = new DOMParser().parseFromString(html, 'text/html');
        const domTarget = dom.querySelector('#result-stats')
    }
    
[/code]

[code]

    <!DOCTYPE html>
    <html>
        <head>
            <script src="search.js"></script>
        </head>
        <body>
            <button type="button" class="btn">RUN</button>
        </body>
    </html>
    
[/code]

[code]

    {
        "name": "Sample",
        "version": "1.0.0",
        "manifest_version": 3,
        "permissions": ["activeTab", "scripting"],
        "action": {
            "default_popup": "content.html"
        }
    }
    
[/code]




質問文のmanifest.jsonには`host_permissions`が設定されていないのでその時点でCORSエラーとなってそうですが、それを

[code]

        "host_permissions": [
            "https://www.google.com/"
        ]
    
[/code]

としたうえで。

* * *
[code]

        const data = await fetch('https://www.google.com/search?q=a')
        const html = data.text()
    
[/code]

とされていますが、この[Response.text()](https://developer.mozilla.org/ja/docs/Web/API/Response/text)は非同期的に解決される、すなわち`Promise`を返します。なので、awaitする必要があります。

[code]

    async function clickHandler(e) {
        const data = await fetch('https://www.google.com/search?q=a')
        const html = await data.text()
        const dom = new DOMParser().parseFromString(html, 'text/html');
        const domTarget = dom.querySelector('#result-stats')
        console.log(domTarget)
    }
    
[/code]

[![domTarget](https://i.stack.imgur.com/a5lYD.png)](https://i.stack.imgur.com/a5lYD.png)




質問文のmanifest.jsonには`host_permissions`が設定されていないのでその時点でCORSエラーとなってそうですが、それを

[code]

        "host_permissions": [
            "https://www.google.com/"
        ]
    
[/code]

としたうえで。

* * *
[code]

        const data = await fetch('https://www.google.com/search?q=a')
        const html = data.text()
    
[/code]

とされていますが、この[Response.text()](https://developer.mozilla.org/ja/docs/Web/API/Response/text)は非同期的に解決される、すなわち`Promise`を返します。なので、awaitする必要があります。

[code]

    async function clickHandler(e) {
        const data = await fetch('https://www.google.com/search?q=a')
        const html = await data.text()
        const dom = new DOMParser().parseFromString(html, 'text/html');
        const domTarget = dom.querySelector('#result-stats')
        console.log(domTarget)
    }
    
[/code]

[![domTarget](https://i.stack.imgur.com/a5lYD.png)](https://i.stack.imgur.com/a5lYD.png)

