'How to use recaptcha v3 in chrome extension?

Is it possible to use reCaptcha V3 in chrome extension. If yes, than how to implement it?

Currently I am implementing it and facing error Refused to load the script 'https://www.google.com/recaptcha/api.js?render=Site_Key_Value' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

The way I am implementing in popup-sign-in.html is

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titled Demo</title>
    <script src="https://www.google.com/recaptcha/api.js?render=Site_Key_Value"></script>
</head>

<body>
    <form>
        <input type="email" name="email" id="email" placeholder="Email">
        <input type="password" name="password" id="password" placeholder="Password">
        <button type="submit">Sign In</button>
    </form>
    <script src="./popup-sign-in.js"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute('Site_Key_Value', {action: 'action_name'})
            .then(function(token) {
              console.log(token);
            });
        });
    </script>
</body>

Can any one tell me how can I implement it without facing any issue?

javascripthtmlgoogle-chromegoogle-chrome-extensionrecaptcha-v3


Solution 1:[1]

You can implement recaptcha in chrome extension with manifest v3 by manually downloading necessary recaptcha scripts and adding them as a part of your extension. (recaptcha.js and recaptcha_gstatic.js)

First line of recaptcha.js reads /* PLEASE DO NOT COPY AND PASTE THIS CODE. */ but sadly that is your only option right now. That's how we are using it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrej

Related Questions