在 Firefox 扩展弹出窗口中执行 javascript答案

【问题标题】：Execute javascript in Firefox extension popup在 Firefox 扩展弹出窗口中执行 javascript
【发布时间】：2018-01-06 18:28:21
【问题描述】：

我目前正在扩展开发方面迈出第一步。目前，我只是想在按下按钮时出现的弹出窗口中显示一些信息。问题是它是动态信息，我从 Internet 上的 JSON 文件中收集。然而，我无法让数据显示在弹出窗口中，并且我已经将问题缩小到它似乎根本没有运行任何 Javascript...

我还有一个非常简单的代码：

manifest.json：

    {

  "manifest_version": 2,
  "name": "Test Extention",
  "version": "1.0",

  "description": "",

  "icons": {
    "256": "icon/button.png"
  },
  "permissions": [
    "activeTab",
    "storage"
  ],
  "browser_action": {
    "default_icon": {
      "200": "icon/button.png"
    },
    "default_title": "Test Extention",
    "default_popup": "popup/popup.html"
  }
}

popup/popup.html:

<html>
    <head>
        <meta charset="utf-8">
        <style>
        html,body{width:300px}
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
        document.getElementById('container').innerHTML = 'testing';
        </script>
    </body>
</html>

当我直接在 Firefox 中运行 html 文件时，它会按预期显示“正在测试”。但是，当我运行扩展程序时，单击新按钮时会弹出一个空的弹出窗口。

我也尝试将 js-code 放入一个函数中，并使用按钮调用它，以查看是否需要一些时间才能运行 js-code，但这也不起作用。

我确信这是我想念的非常简单的东西，但我在这上面找不到任何东西......

【问题讨论】：

检查插件调试器的控制台（about:debugging）或浏览器控制台（ctrl+shift+j）。
@the8472 感谢您的提示，我不知道 about:debugging 中的控制台。当我打开弹出窗口时，它会产生一个错误：内容安全策略：De instellingen van de pagina blokkeerden het laden van een bron op self ('script-src moz-extension://b777829c-c282-42fd-829c-10b9c5e9332e' ）。来源：document.getElementById('container').....它是荷兰语，但大致翻译为：内容安全策略：页面设置阻止了在self上加载源
在搜索此错误消息后，我发现无法在 html 文件本身中使用 js-code。我已将代码移动到它自己的 js 文件中，并将其包含在中。这一次，确实出现了“测试”的文字。我将尝试下一步，并从在线 json 中获取要获取的数据。

标签： javascript firefox firefox-addon-webextensions

【解决方案1】：

WebExtension API 默认应用Content Security Policy。所以它不能在弹出的 HTML 文件中执行内联 javascript 代码。

不仅：

<script>
    document.getElementById('container').innerHTML = 'testing';
</script>

还有：

<button onclick="alert('hello')">Hello</button>

如果你触碰了这条规则，你会在Browser Toolbox和Add-on Debugger中得到一些错误信息。

因此，要解决此问题，请使用 <script src="..."></script> 而不是 <script>...</script>。

或者，也许将 manifest.json 中的 Unsafe inline script 设置为 content_security_policy 键也可以解决此问题。但 MDN 告诉我：

注意：有效示例显示 CSP 中键的正确使用。但是，由于重大安全问题，addons.mozilla.org 上列出的扩展不允许在其 CSP 中包含“unsafe-eval”、“unsafe-inline”、远程脚本、blob 或远程源的扩展。

在this page。好像不是什么好办法。

【讨论】：