[chrome拡張機能]画像が反映されない

Question

あるWEBサイトにいったらある画像の下に別の画像をつける　というchromeの拡張機能を作ってるのですが、なぜか画像が反映されません

manifest.json

{
    "manifest_version": 2,
    "name": "DevelopMona",
    "version": "0.1",
    "content_scripts": [
         {
              "matches": ["https://qiita.com/*"],
              "js": ["jquery-3.2.1.min.js", "main.js"]
         }
    ]
}

main.js

$("div.gazo").after("<img src='gazou.png' width='100px' height='30px' id='image'></img>")

同フォルダ内にgazou.pngがあることは確かなのですが、

↑こういう感じになります。

また、画像を別の所にアプロードして、https://~~/gazou.png としても同様です。
何が原因でしょうか？

Answer 1

Manifest - Web Accessible Resources - Google Chrome

このページに書かれているとおりですが、パッケージ内のリソースには（manifest.jsonのv2下では）デフォルトでアクセスできないようになっているため、manifest.jsonにweb_accessible_resourcesを指定する必要があります。

{
    ...
  "web_accessible_resources": [
    "*.png"
  ],
    ...
}

そのうえで、使用時にはchrome.extension.getURL()を使って画像のパスをextension内部を示すURL（chrome-extension://[extension-id]/[path]）に変換します。

単にsrc="gazou.png"としてしまうと、位置の基準がそのWebページのURLになって、Webサーバー上で画像を探してしまうからです。

const imageURL = chrome.extension.getURL('gazou.png')
const imageTag = `<img src="${imageURL}" width="100" ...>`

Answer 2

"<img src='gazou.png' width='100px' height='30px id='image'

heightがシングルクオートで閉じてません。

#追記
https://qiita.com/dhun/items/87a4fc88fce0ae0dd448
少し調べたところ「web_accessible_resources」というのがいるのでは？
httpで画像を出す場合もおそらくですが「parmission」が必要かなとみました。