Question

我正在研究chrome扩展，我完成了所有工作，但最后我遇到了一个问题，那就是：当内容脚本加载时，它呈现一个html表单，在该表单的顶部有一个图像，它位于我保留内容脚本的本地目录中，并直接加载它们。但它不适用于内容脚本，它不会加载图片，因此我尝试使用imgURL = chrome.extension.getURL("Icons/logo.svg")创建一个网址并将imgURL设置为图片的SRC值，但仍然无法加载。

我遇到的第二个问题是，它没有加载我在表单中使用的fontawesome图标。我尝试通过content_scripts css部分添加font-awesome库，但它向我显示了一些错误。以下是错误和我的代码。

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.

这使Chrome可以访问您存储图标的目录。

尝试添加

web_accessible_resources": [
"icons/*.svg",
]

对于AwesomeFonts，看起来在连接上下载字体时出现问题。尝试下载程序包并从扩展目录中加载它。

内容脚本未加载图片和FontAwesom图标 - Chrome扩展程序

1 个答案: