background.jsからbackground.htmlに画像を読み込むには？

私はクロムエクステンションを開発中です。これで、拡張機能は1時間ごとにAPI呼び出しを行い、getとimageを実行しています。上記の画像をchrome.storage.localに保存します。background.jsからbackground.htmlに画像を読み込むには？

しかし、画像がかなり大きいので、キャンバスを使用して画像のサイズを変更して圧縮しています。

これは私がイメージにAPI呼び出しから得たsrcを注入しようとしている理由です。私は自分の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/*" 
    ] 
}

であり、これはbackground.jsに私のjQueryのAJAXです：

$.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と対話できると仮定しています。

私は間違っていますか？

出典

2017-05-23 Walter Monecke

バックグラウンドページ宣言の ''スクリプト ''は、実際には空の自動生成HTMLページを作成して、background.htmlは決して使用されません。 ''スクリプト ''を単に削除し、 '

background.jsからbackground.htmlに画像を読み込むには？

関連する問題