React Chrome Extension не рендеринг - PullRequest
0 голосов
/ 14 ноября 2018

Я начинаю создавать расширение Chrome, используя React.Моя первая цель - просто открыть логотип React в расширении браузера, как любой проект React после его первоначальной сборки.Я выполнил несколько руководств и настроил свой файл манифеста:

{
  "short_name": "React App",
  "name": "React Extension",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "public/index.html",
    "default_title": "React Ext"
  },
  "version": "1.0"
}

Я не редактировал другие файлы, поэтому index.html выглядит так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>
  </body>
</html>

Когда я загружаю файлымой файл расширения в Chrome и попробуйте запустить это расширение, появляется только маленькая белая коробка.Я ожидаю, что обычный логотип React будет отображаться в моем расширении.Я играл с различными решениями и обнаружил, что если я добавлю

теги и некоторый текст в мой index.html, то этот текст появится в расширении браузера.

Я предполагаю, что мне нужнокое-что, чтобы сообщить моему манифесту, на какие файлы будет ссылаться index.html, но пока мне не повезло.Если бы кто-нибудь смог направить меня на правильный путь, я был бы очень признателен.

1 Ответ

0 голосов
/ 24 апреля 2019

Проблема в том, что расширение сгенерировало ошибку, скорее всего, Политика безопасности содержимого ошибка.

Вот как я исправил эту проблему:

  1. Перейдите на вкладку расширений (chrome: // extensions)
  2. Под вашим расширением вы должны увидеть кнопку ошибок, нажмите на нее (если вы ее не видите, нажмите всплывающее расширение).
  3. Вы увидите ошибку, которая говорит что-то вроде Refused to execute inline script because it violates the following Content Security Policy directive.Скопируйте ша, который вы видите в сообщении об ошибке ('sha256-....')
  4. Перейдите к manifest.json
  5. Добавьте следующий ключ
"content_security_policy": "script-src 'self' 'sha256-...INSERT COPIED SHA256 HERE'; object-src 'self'"`
  1. Запустите npm run build или yarn build снова.
  2. Перезагрузите расширение
  3. Теперь должно работать!
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...