Chrome拡張のinnerHTML要素内のjsファイルに画像を追加しようとしています

Question

オンラインリンクを使用すると動作しますが、ローカルパスを指定してもロードされません。

ワーキング：

<img src="https://test-img-url">

が機能していない：

<img src="image/smile.jpg">

ファイル：
--Chrome | |-----manifeset.json |-----core | |--- CfCore.js |--- images | |---smile.jpg

だから私は、私が使用しているCfCore.jsによinnerHTML：
私が試したマニフェストファイルでも e.innerHTML='<a href=#> <img src="images/smile.jpg" id="smile"> </a>'

：
"web_accessible_resources":["images/smile.jpg"]

私はクロムを使用して示唆人が見つかりました：//拡張機能、マニフェストファイルのweb_accessible_resourcesを、私はそれが参考にどのように私は私のコードですが見つかりません。 jsファイル。

Answer 1

"web_accessible_resources" in manifest.jsonが必要です。

e.innerHTML = '<a href=#><img src="' + 
    chrome.runtime.getURL('images/smile.jpg') + '" id="smile"></a>'); 

または自動で相対SRCリンクにchrome.runtime.getURLを挿入するために、単純なregexp replaceを使用します：

e.innerHTML = expandLocalSrc('<a href=#><img src="images/smile.jpg" id="smile"></a>'); 

function expandLocalSrc(html) { 
    return html.replace(/src="([^:"]+)"/g, 'src="' + chrome.runtime.getURL('') + '$1"'); 
} 

P.S.

次に、あなたのコード内でchrome.runtime.getURLを使用リンクはmanifest.jsonに関連していますですのでご質問によるとcore/images/smile.jpgです。imagesディレクトリをcoreの外に移動するだけです。