0

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?

1 Answers1

0

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.

Andrej
  • 407
  • 4
  • 12
  • It still wont work because of the way API accepts your API key and also downloads other js files. Can you share some demo that you wrote? Or if its opensource would you mind if I can take a look? – AMBasra Sep 20 '22 at 04:38