Question

我正在尝试在firefox上构建支持多种语言的浏览器扩展。

我决定使用handlebars.js作为模板引擎。但我无法在浏览器弹出窗口中使用它。（我没有在内容脚本上测试它，所以我不确定它是否适用于内容脚本）

如果用户没有在扩展程序上按下登录，我希望它显示登录按钮。

当我在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>

弹出窗口中的Firefox WebExtension CSP问题

0 个答案: