Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Chrome extensions CSP (for external scripts)

I want to create a similar chrome extensions https://chromewebstore.google.com/detail/jetradar-cheap-flights-ai/bbdcobeilglncnnogiogdiagjflekean

I have this code:

<script async src="https://tp.media/content?currency=usd&trs=291038&shmarker=21549&combine_promos=101_7873&show_hotels=true&powered_by=true&locale=en_us&searchUrl=search.jetradar.com&color_button=%2332a8dd&color_icons=%2332a8dd&dark=%23262626&light=%23FFFFFF&secondary=%23FFFFFF&special=%23C4C4C4&color_focused=%2332a8dd&border_radius=0&no_labels=&plain=true&promo_id=7879&campaign_id=100" charset="utf-8"></script>

But it gives out security errors every time:

Refused to load the script 'https://tp.media/content?currency=usd&trs=291038&shmarker=21549&combine_promos=101_7873&show_hotels=true&powered_by=true&locale=en_us&searchUrl=search.jetradar.com&color_button=%2332a8dd&color_icons=%2332a8dd&dark=%23262626&light=%23FFFFFF&secondary=%23FFFFFF&special=%23C4C4C4&color_focused=%2332a8dd&border_radius=0&no_labels=&plain=true&promo_id=7879&campaign_id=100' 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 tried different ways, but nothing helped(

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In Manifest V3, executing external scripts directly in the context of an extension is not allowed, but you are still allowed to display external content through a web page loaded into an iframe, provided that the iframe loads a resource accessible over HTTPS.

    So, you can create an HTML page that will be embedded as an iframe in the popup extension and on which your external script will be placed.

    Create the following files for your extension: (It is assumed that you have a file widget.html , accessible via HTTPS on any server.)

    1. manifest.json:

    {
  "manifest_version": 3,
  "name": "Flight Tickets Widget",
  "version": "1.0",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  }
}

    1. popup.html (Specify the HTTPS URL to your widget in the src attribute of the iframe tag)

    <!DOCTYPE html>
<html>
<head>
  <title>Flight Tickets Widget</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 400px;
      height: 600px;
    }
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <iframe src="https://yourserver.com/widget.html"></iframe>
</body>
</html>

    Replace https://yourserver.com/widget.html to the actual URL where your widget.html the page.

    1. widget.html (This file must be hosted on your server and accessible via HTTPS)

    <!DOCTYPE html>
<html>
<head>
  <title>Widget</title>
</head>
<body>
  <script async src="https://tp.media/content..."></script>
</body>
</html>

    All is work with manifest V3! Thanks!


  2. 0

    Update Content Security Policy (CSP)
    you can update it to allow scripts from the specified domain.

    add ‘https://tp.media’

    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://tp.media;">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search