我正在尝试在firefox上构建一个支持多种语言的浏览器扩展 .
我决定使用 handlebars.js
作为模板引擎 . 但是我可以在内容脚本上对它进行测试,所以我甚至可以在内容脚本上工作了#621595_
如果用户没有按下扩展程序上的登录,我希望它显示登录按钮 .
当我在firefox中使用调试器时,它会返回此错误
Error: call to Function() blocked by CSP
我已经尝试将它加载到chrome上,但它似乎工作得非常好 .
我的manifest.json
{
"manifest_version": 2,
"name": "Foo",
"version": "0.1",
"description": "",
"icons": {
"48": "icons/blue_z-48.png"
},
"background":{
"scripts":[
"browser-polyfill.js"
]
},
"permissions":["<all_urls>","tabs"],
"browser_action":{
"default_icon":{
"48":"icons/blue_z-48.png"
},
"default_title":"Foo",
"default_popup":"popup/landing.html"
},
"content_scripts":[
],
"content_security_policy":"script-src 'self' 'unsafe-eval' 'unsafe-inline'; object-src 'self'",
"web_accessible_resources":[
"overlay/footer.html"
]
}
解析模板的js部分:
var template = Handlebars.compile($("#main-template").html());
var data = {isLoggedin: false};
$("#popup-content").html(template(data));
popup / landing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="../js/handlebars-v4.0.5.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/popup.css">
<script src="popup.js" type="text/javascript"></script>
</head>
<body>
<div class="header container">
<img src="img/logo.png">
</div>
<div class="container" id="popup-content">
<script id="main-template" type="text/x-handlebars-template">
<div class="wrapper">
{{#unless isLoggedin}}
<img src="img/sign_in.png"> <span>Sign In</span>
{{/if}}
</div>
</script>
</div>
</body>
</html>