How do I display Google reCAPTCHA v2 in a Chrome Extension browser action?

Question

I'm building a Chrome Extension that interacts with an API that I wish to protect using Google recatcha, as I'm intending for it to be used beyond just the Chrome Extension. The API side is working, correctly verifying a recaptcha response with Google, however, displaying the recatcha widget inside the extension's browser action window is resulting in the following javascript error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl:80') does not match the recipient window's origin ('chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl').

which is generated in recaptcha_en.js at the line:

(a.window || ne(a.Tg)).postMessage(JSON.stringify({
        message: c || null ,
        messageType: b
    }), Zj(a.path));

The problem seems to be that the value of a.path is chrome-extension://pjhcgfibbbmibojnlkgjejaojpokgldl:80 but I don't know how I can affect this value.

The result of this error is that the recaptcha widget displays a message saying:

Please upgrade to a supported browser to get a reCAPTCHA challenge.

I'm displaying the widget via the auto render method, but have also tried the explicit method which results in the same error. For info, I'm using the following content_security_policy:

script-src 'self' https://*.google.com https://*.gstatic.com; object-src 'self'

Is there any way I can get this to work in my extension? And if not, what is the best alternative method for integrating recaptcha?

Answer 1

In recaptcha v3

manifest.json "content_security_policy": "script-src 'self' https://.google.com https://.gstatic.com; object-src 'self'"

ADD CHROME EXTENCION ID TO ALLOWED DOMAINS IN RECAPTCHA ADMIN CONSOLE

chrome-extension://aailnablglhloogfnpkgddnjjfimhhhg

so you just put "aailnablglhloogfnpkgddnjjfimhhhg" without chrome-extension://