Как загрузить изображение из background.js в background.html?

Я разрабатываю расширение для Chrome. Теперь расширение делает вызов API каждый час и получает изображение. Я хочу сохранить указанное изображение в chrome.storage.local.

Однако изображение довольно большое, поэтому я сжимаю или изменяю размер изображения с помощью холста.

Вот почему я пытаюсь внедрить src (который я получаю из вызова API) в изображение. Я думал, что смогу внедрить тег изображения, который существует в моем background.html.

это мой манифест

{
"manifest_version": 2,
  "name": "moodflow",
  "short_name": "moodflow",
  "description": "",
  "version": "0.0.0.10",
  "author": "Walter J. Monecke",
  "chrome_url_overrides" : {
    "newtab": "index.html"
  },
  "background": {
    "scripts": ["./js/jquery-3.2.1.min.js", "hot-reload.js", "background.js"],
    "pages": ["background.html"]
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "permissions": [
    "storage",
    "alarms",
    "unlimitedStorage",
    "activeTab",
    "https://www.youtube.com/iframe_api",
    "https://api.unsplash.com/photos/random",
    "https://api.unsplash.com/photos/random/*"
  ]
}

и это мой jQuery AJAX в background.js:

$.ajax({
    url: "https://api.unsplash.com/photos/random",
    type: 'get',
    async: true,
    dataType: "json",
    data: "client_id=29b43b6caaf7bde2a85ef2cfddfeaf1c1e920133c058394a7f8dad675b99921b&collections=281002",
    success: (response) => {
        alert('successful API');
        alert(response);
        // insert src into img 
        $('#source_img').css('display', 'none');


        $('#source_img').on('load', function() {
            alert('Image has loaded!');
            //compressImageAndSave();
        }).attr('src', response.urls.raw);
      },
        error: () => {
          alert('getPictureApi AJAX failed');
        }
    });

а это мой background.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <img src="" id="source_img">
  </body>
</html>

Я думаю, что моя ошибка в том, что я предполагаю, что мой background.js может взаимодействовать с моим background.html.

Что я делаю не так?


javascript google-chrome google-chrome-extension
person Walter Monecke    schedule 23.05.2017    source источник
comment
"scripts" в объявлении фоновой страницы фактически создает пустую автоматически сгенерированную html-страницу, поэтому ваш background.html никогда не используется. Просто удалите "scripts" и включите файлы js через теги <script>.   -  person wOxxOm    schedule 23.05.2017
comment
@wOxxOm Вы имеете в виду полное удаление моего файла background.js? Задачи в background.js должны выполняться, даже если расширение не открыто.   -  person Walter Monecke    schedule 23.05.2017
comment
Э???? Я имею в виду ключ "scripts" в вашем manifest.json.   -  person wOxxOm    schedule 23.05.2017
comment
@wOxxOm Извините, если я не понимаю. Вы имеете в виду просто оставить манифест вот так? "background": { "./js/jquery-3.2.1.min.js", "hot-reload.js", "background.js" },   -  person Walter Monecke    schedule 23.05.2017
comment
Нет, это будет недопустимый синтаксис. Проверьте документацию для фоновой страницы. Я думал, что объяснил совершенно ясно, но очевидно, что я плохо объясняю.   -  person wOxxOm    schedule 23.05.2017
comment
Кстати, это не "pages" и массив, а "page" и одно строковое значение.   -  person wOxxOm    schedule 23.05.2017
comment
@wOxxOm, что случилось с сарказмом, LOL, делая то, что вы сказали, чтобы включить теги сценария, тогда я не могу выполнять фоновые задачи. Так что нет, я не понимаю, что вы имеете в виду.   -  person Walter Monecke    schedule 23.05.2017

Ответы (1)


arrow_upward
1
arrow_downward

Фоновая страница может быть только одна. В настоящее время вы пытаетесь объявить две фоновые страницы: "scripts" создает автоматически сгенерированную пустую страницу, а "pages" является недопустимым объявлением обычной фоновой страницы.

Удалите раздел "scripts", свяжите файлы js с помощью тегов <script> в вашем html, используйте правильное объявление "page" с одним значением.

manifest.json

{
"manifest_version": 2,
  "name": "moodflow",
  "short_name": "moodflow",
  "description": "",
  "version": "0.0.0.10",
  "author": "Walter J. Monecke",
  "chrome_url_overrides" : {
    "newtab": "index.html"
  },
  "background": {
    "page": "background.html"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "permissions": [
    "storage",
    "alarms",
    "unlimitedStorage",
    "activeTab",
    "https://www.youtube.com/iframe_api",
    "https://api.unsplash.com/photos/random",
    "https://api.unsplash.com/photos/random/*"
  ]
}

background.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <img src="" id="source_img">
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="hot-reload.js"></script>
    <script src="background.js"></script>
  </body>
</html>

и background.js без изменений.

person Iván Nokonoko    schedule 23.05.2017
comment
Спасибо вам обоим за помощь! Он работает отлично! Извините, если я не понял в начале. Я занимаюсь кодированием всего 3 месяца. - person Walter Monecke; 24.05.2017
comment
Вся заслуга @wOxxOm. Мы все были там, продолжайте кодировать :) - person Iván Nokonoko; 24.05.2017