Javascript не запускается на локальной странице

У меня есть очень простое веб-расширение, которое должно открывать локальную страницу в новом окне при нажатии кнопки:

function openMyPage() {
    var popupURL = chrome.extension.getURL("my-page.html");

    chrome.windows.create({
      url: popupURL,
      type: "popup",
      height: 200,
      width: 200
    });
}

chrome.browserAction.onClicked.addListener(openMyPage);

Внутри my-page.html я хочу запустить какой-нибудь javascript, но не могу заставить его работать. Даже простой скрипт не выполняется:

<html>
   <body>
     <script type="text/javascript">
        document.write("JS executed")
     </script>
   </body>
</html>

URL-адрес открытой страницы — это что-то вроде moz-extension://8974747a-3aa7-4654-93e5-ad60d3de0cc5/my-page.html. Я пытался отключить надстройки, такие как NoScript, но безрезультатно.

Как я могу выполнить JS на этой странице? Что я делаю не так? Спасибо за вашу помощь.

Изменить: manifest.json по запросу:

{

  "description": "Adds browser action icon to toolbar to open packaged web page. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#open-my-page-button",
  "manifest_version": 2,
  "name": "open-my-page",
  "version": "1.0",
  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button",
  "icons": {
    "48": "icons/page-48.png"
  },

  "applications": {
    "gecko": {
      "id": "[email protected]",
      "strict_min_version": "45.0"
    }
  },

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": "icons/page-32.png"
  }

}

Он взят непосредственно из одного из примеров Mozilla.


person s3rius    schedule 01.09.2016    source источник
comment
Есть ли ошибки в консоли Javascript?   -  person Barmar    schedule 02.09.2016
comment
В JS есть некоторые ограничения, которые вы можете выполнять в расширении, см. этот документ developer.chrome.com/extensions /contentSecurityPolicy   -  person Dario    schedule 02.09.2016
comment
Предоставьте файл manifest.json. Нам нужен полный минимальный воспроизводимый пример, чтобы иметь возможность воспроизвести проблему.   -  person Makyen♦    schedule 02.09.2016
comment
@Дарио Кажется, это правильный путь. Пример на этой странице — это почти то, что я пытаюсь сделать. Почитаю, спасибо.   -  person s3rius    schedule 02.09.2016
comment
Что делает консоль браузера (Ctrl-Shift-J или Cmd -Shift-J в OSX) показывает, когда вы пытаетесь открыть свою страницу. Я предполагаю, что это показывает что-то вроде: Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src moz-extension://nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn”). my-page.html   -  person Makyen♦    schedule 02.09.2016


Ответы (1)


Встроенные сценарии не работают с политикой безопасности содержимого по умолчанию.

Вероятно, вы столкнулись с Политикой безопасности контента по умолчанию, которая является:

"script-src 'self'; object-src 'self';"

Это означает, что Встроенный JavaScript не будет работать. Другими словами, в вашем HTML не разрешены такие вещи, как следующее:

<script type="text/javascript"> document.write("JS executed")</script>

or

<script>console.log("foo");</script>

or

<div onclick="console.log('click')">Click me!</div>

Обычное решение.
Обычное решение состоит в том, чтобы переместить весь ваш JavaScript в один или несколько отдельных файлов и включить их примерно так:

<script type="text/javascript" src="my-page.js"></script>

Использование встроенных сценариев.
Если вы хотите использовать встроенные сценарии, вы можете использовать content_security_policy в вашем manifest.json. Однако вам нужно будет предоставить хэш скрипта в директиве "script-src"."

Если по какой-либо причине вам действительно необходимо использовать встроенные скрипты, вам, вероятно, будет намного проще переместить все содержимое вашего скрипта во внешний файл, чем включать скрипты встроенный в ваш HTML (что потребует от вас повторного вычисления хэша для любого изменения в скрипте).

Реализовано в Firefox 48:
Эта политика безопасности контента была реализовано в Firefox 48. В этом сообщении в блоге, посвященном Firefox 48, обязательно упоминается:

Обратите внимание: это будет обратно несовместимое изменение для любых Firefox WebExtensions, которые не соответствуют этому CSP. Существующие WebExtensions, которые не соответствуют CSP, необходимо будет обновить.

Ваш конкретный случай:

Это будет работать, если вы измените свой скрипт на (при создании хэша учитываются пробелы):

<script type="text/javascript">document.write("JS executed");</script>

И добавьте следующую строку в файл manifest.json:

"content_security_policy": "script-src 'self' 'sha256-Z4nYjltJ/RciFs77n2n91dzwoz1Qg/1JFwU5ODwWPC8='; object-src 'self';"
person Makyen♦    schedule 01.09.2016
comment
@s3rius, дополненный информацией о том, как вы можете использовать встроенные скрипты, если вы действительно этого хотите. - person Makyen♦; 02.09.2016
comment
Это помогает, спасибо. Раздражает то, что я не узнал об этом сам, но google был разочаровывающе бесполезен, поскольку вопросы о том, что javascript не работает на локальных страницах, возвращают миллион вещей, ни одна из которых не имеет отношения к делу. - person s3rius; 02.09.2016
comment
@ s3rius, я рад, что смог помочь. Я обнаружил, что на самом деле попробовал это, заглянув в консоль браузера (Ctrl-Shift-J или Cmd-Shift-J в OSX). Как только у меня появилось сообщение об ошибке, о котором я упоминал в своем комментарии к вашему вопросу, поиск проблемы стал относительно простым. Консоль браузера часто оказывается весьма полезной (хотя иногда слишком много информации от других надстроек/Firefox, которую необходимо отфильтровать). - person Makyen♦; 02.09.2016
comment
Действительно, я даже не знал, что консоль существует, прежде чем задать этот вопрос. Моих знаний о веб-вещах не хватило бы даже на чайную ложку :) - person s3rius; 02.09.2016
comment
Я был немного смущен тем, как генерировать хэш. 1) Все МЕЖДУ тегами, например. document.write("JS executed"); 2) сохранить его в файл, например. foo.txt, без символа конца строки, используя текстовый редактор, который не будет принудительно добавлять конец строки. Если вы используете символы конца строки, убедитесь, что они одного типа. 3) openssl dgst -sha256 -binary foo.txt | openssl base64, который выводит Z4nYjltJ/RciFs77n2n91dzwoz1Qg/1JFwU5ODwWPC8=, желаемый хеш sha256, base64, закодированный из двоичного, НЕ шестнадцатеричного. OpenSSL доступен на большинстве платформ, но могут существовать и другие инструменты. - person ; 25.10.2017