I'm in the process of creating a chrome extension that involves making an API call every hour to retrieve an image, which I then want to save in chrome.storage.local.
However, the size of the image is quite large, so I'm resizing it using a canvas.
My approach involves injecting the source URL (obtained from the API call) into an image tag within my background.html file.
Here is an excerpt from 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/*"
]
}
Below is the jQuery AJAX code snippet from my 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 here is my background.html code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="" id="source_img">
</body>
</html>
I suspect that my mistake lies in assuming that my background.js can directly interact with my background.html file.
What do you think I might be doing wrong?