JavaScript 不在本地页面上运行

2023-11-29

我有一个非常简单的网络扩展，当单击按钮时，它应该在新窗口中打开本地页面：

function openMyPage() {
    var popupURL = chrome.extension.getURL("my-page.html");

    chrome.windows.create({
      url: popupURL,
      type: "popup",
      height: 200,
      width: 200
    });
}

chrome.browserAction.onClicked.addListener(openMyPage);

在 my-page.html 中，我想运行一些 javascript，但无法让它工作。即使是一个简单的脚本也不会执行：

<html>
   <body>
     <script type="text/javascript">
        document.write("JS executed")
     </script>
   </body>
</html>

打开页面的 URL 类似于moz-extension://8974747a-3aa7-4654-93e5-ad60d3de0cc5/my-page.html。我尝试禁用 NoScript 等插件，但无济于事。

如何在这个页面执行JS？我究竟做错了什么？感谢您的帮助。

根据请求编辑：manifest.json：

{

  "description": "Adds browser action icon to toolbar to open packaged web page. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#open-my-page-button",
  "manifest_version": 2,
  "name": "open-my-page",
  "version": "1.0",
  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button",
  "icons": {
    "48": "icons/page-48.png"
  },

  "applications": {
    "gecko": {
      "id": "[email protected]",
      "strict_min_version": "45.0"
    }
  },

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": "icons/page-32.png"
  }

}

它直接取自 Mozilla 的一个示例。

内联脚本不适用于默认内容安全策略

您可能正在遇到默认内容安全策略这是：

"script-src 'self'; object-src 'self';"

意思就是内联 JavaScript 将无法运行。换句话说，您的 HTML 中不允许出现以下内容：

<script type="text/javascript"> document.write("JS executed")</script>

<script>console.log("foo");</script>

<div onclick="console.log('click')">Click me!</div>

正常解决方案：
正常的解决方案是将所有 JavaScript 移动到一个或多个单独的文件中，并将它们包含在以下内容中：

<script type="text/javascript" src="my-page.js"></script>

使用内联脚本：
如果您想使用内联脚本，可以使用content_security_policy键入你的清单.json文件。但是，您需要提供““script-src”指令中脚本的哈希值。"

除非，出于某种原因，你真的need要使用内联脚本，您可能会发现它much更容易将所有脚本内容移动到外部文件，而不是包含与 HTML 内联的脚本（这需要您重新计算对脚本的任何更改的哈希值）。

在 Firefox 48 中实现：
该内容安全政策是在 Firefox 48 中实现。关于 Firefox 48 的博客文章肯定提到：

请注意：这将是一个向后不兼容的更改对于任何不遵守此 CSP 的 Firefox WebExtension。不遵守 CSP 的现有 WebExtension 需要更新。

您的具体案例：

如果您将脚本更改为（创建哈希时空格计数），它将起作用：

<script type="text/javascript">document.write("JS executed");</script>

并且，将以下行添加到您的清单.json:

"content_security_policy": "script-src 'self' 'sha256-Z4nYjltJ/RciFs77n2n91dzwoz1Qg/1JFwU5ODwWPC8='; object-src 'self';"

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

firefox

firefoxaddon

firefoxaddonwebextensions