CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Walter Monecke
Walter Monecke

Reputation: 2558

How to load image from background.js to background.html?

I am developing a chrome extension. Now the extension is making an API call every hour and getting and image. I want to save said image in chrome.storage.local.

However, the image is pretty big so I am compressing aka resizing the image with the use of a canvas.

This is why I am trying to inject the src (which I get from the API call) to an image. I thought I would be able to inject into an image tag that exists within my background.html.

this is my manifest

{
"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/*"
  ]
}

and this is my jQuery AJAX in 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');
        }
    });

and this is my background.html

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

I think my mistake is that I am assuming that my background.js can interact with my background.html.

What am I doing wrong?

Upvotes: 0

Views: 554

Answers (1)

Iv&#225;n Nokonoko
Iv&#225;n Nokonoko

Reputation: 5118

There can be only one background page. Currently you try to declare two background pages: "scripts" creates an autogenerated empty page and "pages" is an invalid declaration of a normal background page.

Remove the "scripts" section, link the js files via <script> tags in your html, use the correct "page" declaration with a single value.

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>

and background.js unchanged.

Upvotes: 1

Related Questions