dom操作でのimg表示について

Question

chromeのnew tabを開いた際に、
googleの画像をyahooの画像に変えようと思い以下のプログラムを作成しました。

しかし、
以下のエラーが表示され、新しいtabを開いても画像が表示されません。
Uncaught (in promise) TypeError: Failed to fetch

optionmotors.com.hk/product_images/uploaded_images/yahoo_logo-620x168.png:1 GET http://optionmotors.com.hk/product_images/uploaded_images/yahoo_logo-620x168.png net::ERR_FAILED

var timer = 0;
var delay = 100;
$(document).bind('DOMNodeInserted', function(event) {
    if (timer) return;
    var url="http://optionmotors.com.hk/product_images/uploaded_images/yahoo_logo-620x168.png";
    timer = setTimeout(function() {
            $("#lga img").attr("src",url);
            $("#logo-sub").empty();
        timer = 0;
    }, delay);
});

{
  "name": "new_tab_logo",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "logoを変更する",
  "content_scripts": [
    {
      "matches": ["https://www.google.co.jp/*"],
      "js": ["jquery.min.js","script.js"],
      "run_at" :"document_start"
    }
  ],
  "icons": {
        "128": "img/icon_128.png",
        "48":  "img/icon_48.png",
        "16":  "img/icon_16.png"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
  }

Answer 1

HTTPS ページから HTTP ページのリソースを使おうとしているからです

こういうメッセージが出ているかと思います

Mixed Content: The page at 'https://www.google.co.jp/_/chrome/newtab?espv=2&ie=UTF-8' was loaded over HTTPS, but requested an insecure image 'http://optionmotors.com.hk/product_images/uploaded_images/yahoo_logo-620x168.png'. This content should also be served over HTTPS.

新しいタブは一応 HTTPS ページ扱いです

例えば↓のように Yahoo の公式サイトにある画像の HTTPS の URL にすると表示されます

    var url="https://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png";

↑の https を http にしたら表示されなくなります

拡張機能なら外部のアップローダではなく拡張機能自体に画像を含めてしまうというのも手だと思います