コンテンツスクリプトが読み込まれていません画像とFontAwesomのアイコン - Chrome拡張機能

Question

クロム拡張機能を使用していますが、すべての作業が完了しましたが、最後に問題が発生しました。コンテンツスクリプトが読み込まれると、そのフォームの上部には画像があります。これはローカルのディレクトリにあり、そこで私はコンテンツスクリプトを保存し、直接ロードします。しかし、それはコンテンツのスクリプトでは動作しません、それは画像をロードしないので、私はimgURL = chrome.extension.getURL("Icons/logo.svg")とURLを作成しようとしたimgURLSRCの値として、まだロードに失敗しました。

私が直面した2番目の問題は、私がフォームで使用したフォントワームアイコンを読み込まないことです。私はフォントの素晴らしいライブラリをcontent_scriptsのCSS部分で追加しようとしましたが、いくつかのエラーが表示されます。以下はエラーと私のコードです。

var imgURL = chrome.extension.getURL("Icons/logo.svg"), 
 
    _body = document.getElementsByTagName("body")[0], 
 
    _html = '<div class="job-form-wrap"><div class="jfw-head row"><div class="col-6 jfw-logo-sec"><img src="'+imgURL+'"></div><div class="col-6 jfw-close-sec"><i class="fa fa-times-circle"></i></div></div><div class="jfw-head-menu row"><div class="col-2 jfwhm-sec tab-btn"> <i class="fa fa-globe jfwhm-sec-active"></i> <span class="label">Find Job</span> </div><div class="col-2 jfwhm-sec tab-btn"> <i class="fa fa-plus-circle"></i> <span class="label">Add Job</span> </div><div class="col-2 jfwhm-sec tab-btn"> <i class="fa fa-cog"></i> <span class="label">Settings</span> </div><div class="col-2 jfwhm-sec"> <i class="fa fa-thumb-tack"></i> <span class="label">Board</span> </div><div class="col-2 jfwhm-sec"> <i class="fa fa-map"></i> <span class="label">View Map</span> </div><div class="col-2 jfwhm-sec"> <i class="fa fa-user"></i> <span class="label">Get In</span> </div></div><div class="jfw-jobs-lists tab-body"><div class="jfw-no-job">We couldnt find jobs in this specific page. Our automatic job detection system is improving everyday! For now you can add a job through the <b>ADD JOB</b> form manually.</div><div class="jfw-avail-job"><div class="jfw-avail-job-wrap"><li class="aj-list-sec row"><div class="col-8 ajls-head"> <a href="#">I am the job Head I am the job HeadI am the job Head</a> </div><div class="col-4 ajls-save-tog"><span class="ajlsst-wrap"><span class="ajls-save-sec ajls-save"><i class="fa fa-bookmark-o"></i><span class="ajls-labe">Save</span></span><span class="ajls-save-sec ajls-saved"><i class="fa fa-check"></i><span class="ajls-labe">Saved</span></span></span></div><div class="col-12 ajls-desc">We couldnt find jobs in this specific page. Our automatic job detection system is improving everyday! For now you can add a job through the</div><div class="col-6 ajls-comp"><i class="fa fa-briefcase"></i> <span>Bonial International GmbH </span></div><div class="col-6 ajls-loc"><i class="fa fa-map-marker"></i> <span>Berlin, Germany</span></div></li></div></div></div><form method="POST" class="mjob-add tab-body" id="mjob-add"><div class="jfw-body"><div class="jfw-body-wrap"> <div class="col-12 mj-error"></div><div class="my-select"> <div class="my-select-wrap"> <div class="my-selected-head"> <span class="mst-text bt-text">Board Type</span> <i class="fa fa-angle-down"></i> </div><div class="my-select-opts"> <li>My First Board</li></div></div></div><div class="my-select"> <div class="my-select-wrap"> <div class="my-selected-head"> <span class="mst-text jt-text">Job Type</span> <i class="fa fa-angle-down"></i> </div><div class="my-select-opts"> <li>Wishlist</li><li>Rejected</li><li>Applied</li><li>Interview</li><li>Offer</li></div></div></div><input type="text" name="mj_cname" placeholder="Company Name"><input type="text" name="mj_jobtit" placeholder="Job Title"><input type="text" name="mj_loc" placeholder="Location"><input type="text" name="mj_url" placeholder="Post URL"><textarea name="mj_desc" placeholder="Job Description"></textarea></div></div><div class="form-submit"><button type="submit" class="cus-btn cus-btn-blue mj-submit">Save Job</button></div></form><div class="col-12 mj-added"><div class="suw-head"><svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg><h3>Job Added</h3></div><div class="suw-desc">Your Jobe has been successfully added ! </div><div class="suw-foot"><button class="cus-btn cus-btn-blue open-mj-add">Go Back</button><a href="" class="check-link">Check out your Dashboard !</a></div></div><div class="jfw-settings tab-body"><div class="user-email"> <i class="fa fa-envelope"></i> antesoft17@outlook.com</div><div class="user-board"><a href=""> <i class="fa fa-thumb-tack"></i> Goto User Board</a></div><div class="user-logout"><a href=""> <i class="fa fa-user"></i> Logout</a></div></div></div>'; 
 
console.log(imgURL); 
 
_body.insertAdjacentHTML('beforebegin', _html);

The Errors

Answer 1

あなたは、これはクロムにあなたがあなたのアイコンが保存されていたディレクトリにアクセスするための権限を与え、あなたのweb accessible resources.

を設定する必要があります。それはあなたの接続を介してフォントをダウンロード中に問題を持っているようAwesomeFontsについて

に追加

てみてください、それが見えます。パッケージをダウンロードし、拡張ディレクトリからロードしてみてください。