Chrome показывает ошибку как: Отказался от выполнения встроенного script из-за Content-Security-Policy

Я работаю над созданием расширения Chrome виджета Cropping. Код моего popup.html выглядит следующим образом:

    <body>
            <textarea id="widget_script" style="border:1px solid #ccc;padding:5px;width:600px" rows="5" readonly></textarea>
            <script type="text/javascript">
                var protocol=window.location.protocol;
                var host= window.location.host;
                var head=('<div id="wd_id" style="margin-bottom: 20px;"></div>
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></\script>
                <script type="text/javascript" src="'+protocol+'//'+host+'Image_crop/cropimages/img_crop_widget.js'+'"><\/script>
                <script type="text/javascript">init_widget()<\/script>');
                document.getElementById("widget_script").innerHTML=head;
            </script>
    </body>

Переменные протокол и хост принимают протокол и узел из URL-адреса в браузере. Когда я пытался интегрировать это как расширение Chrome, он не работает. Когда он работает отлично, он отображает следующий код в текстовом поле:

<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://localhost/cropimages/img_crop_widget.js"></script>
<script type="text/javascript">init_widget()</script>

У меня есть несколько вещей, например, размещение JS-кода во внешнем JS файле, а также вызов файла в manifest.json, вызывающего его в моем popup.html, но никто не работал.

Может ли кто-нибудь сказать мне, что я делаю неправильно, или что еще я должен попытаться заставить его работать?

Спасибо заранее...

Ответ 1

Из расширений Chrome CSP docs:

Встроенный JavaScript не будет выполнен. Это ограничение запрещает как встроенные <script> блоки, так и встроенные обработчики событий (например, <button onclick="...">).

У вас не может встроенные скрипты в вашем расширении HTML:

<script>alert("I'm an inline script!");</script>

<button onclick="alert('I am an inline script, too!')">

Скорее, вы должны поместить свой script в отдельный файл:

<script src="somescript.js"></script>

Ответ 2

Вы должны добавить content_security_policy в ваш файл manifest.json:

"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"

Вы найдете хеш из консоли.