Home > Back-end >  Refused to load the script ... because it violates the following Content Security Policy directive:
Refused to load the script ... because it violates the following Content Security Policy directive:

Time:11-13

Chrome extension V3 : Refused to load the script 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

  • I want to add google translate to translate popup extension but i got that error

my html

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>

<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</body>
</html>

error

https://user-images.githubusercontent.com/78076796/201490254-8194ba99-2238-462f-843c-8f45be54b68d.png

I really can't find any example of this error for chrome extension v3. help me pls :((

i tried to find extension_pages and sandbox ; but it always fails

CodePudding user response:

manifest V2

In Chrome extension with manifest V2 you can do it like this:

manifest.json

"content_security_policy": "script-src 'self' https://translate.google.com; 

manifest V3

Remotely hosted code

In Manifest V3, all of your extension's logic must be bundled with the extension. You can no longer load and execute a remotely hosted file. A number of alternative approaches are available, depending on your use case and the reason for remote hosting.

source: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#remotely-hosted-code

  • Related