Inhalt Scripts lädt nicht Image und FontAwesom Icons - Chrome Extension

Question

Ich arbeite an einer Chrome-Erweiterung, ich bin fertig mit allem, aber schließlich sah ich ein Problem, nämlich: Wenn die Inhaltsskripte geladen werden, rendern sie einen HTML-Code form, oben auf diesem Formular befindet sich ein Bild, das sich im lokalen Verzeichnis befindet, in dem ich die Inhaltsskripte aufbewahrt habe, und lädt sie direkt. Aber es funktioniert nicht mit Inhaltsskripts, es lädt das Bild nicht, also habe ich versucht, eine URL mit imgURL = chrome.extension.getURL("Icons/logo.svg") zu machen und den imgURL als SRC Wert des Bildes zu setzen, aber immer noch nicht geladen.

Das zweite Problem, mit dem ich konfrontiert wurde, ist, dass es nicht die Fontawesome-Icons lädt, die ich in der Form verwendet habe. Ich habe versucht, die font-awesome-Bibliothek durch content_scripts css Teil hinzuzufügen, aber es zeigt mir einige Fehler. Unten sind die Fehler und mein Code.

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

Sie benötigen web accessible resources.

Dies gibt Chrome Erlaubnis setzen Zugriff auf das Verzeichnis, wo Sie Ihre Symbole gespeichert haben.

Versuchen in

Für die AwesomeFonts Zugabe sieht es aus wie es ein Problem Herunterladen der Schriftarten über Ihre Verbindung hat. Versuchen Sie, das Paket herunterzuladen und es aus dem Erweiterungsverzeichnis zu laden.