如何在Chrome扩展程序浏览器操作中显示Google reCAPTCHA v2？

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://