Chrome App中JavaScript无法加载问题求助（附代码）

我来帮你从代码本身和Chrome App的环境限制两方面排查问题，一步步帮你解决：

一、先修复代码里的基础错误 #

从你提供的代码来看，有几个明显的语法和逻辑问题，会直接导致JS无法正常运行：

1. HTML标签未正确闭合
   你的DOM结构里这段代码存在标签未闭合的问题：

<div id="div1"><h2 id="demo1"><h2 id="demo2"></h2></div>

<h2 id="demo1">没有闭合，浏览器解析时会出现DOM结构异常，后续JS无法正确获取目标元素。改成：

<div id="div1">
  <h2 id="demo1"></h2>
  <h2 id="demo2"></h2>
</div>

2. 重复变量声明的潜在风险
   在add()函数里，你多次用var para声明同一个变量：

var para = document.createElement("h4");
// ... 后续又重复声明
var para = document.createElement("h4");

虽然JS允许重复使用var，但会引发变量提升问题，容易导致意外行为。建议换成let（允许重新赋值）或者const（变量无需修改时）：

let para = document.createElement("h4");
// ... 后续直接赋值，不用再声明
para = document.createElement("h4");

3. parseInt未指定基数
   你用parseInt(w[i].innerText)时没传第二个参数（基数），如果输入的价格带前导0，会被当成八进制解析，导致计算错误。改成：

total += parseInt(w[i].innerText, 10);

还可以加个|| 0处理非数字输入的情况，避免出现NaN：

total += parseInt(w[i].innerText, 10) || 0;

4. 内联事件绑定违反Chrome App的CSP规则
   这是Chrome App环境下的核心问题！Chrome App默认的内容安全策略（CSP）禁止内联脚本和内联事件处理，所以<button onclick="add()">Add</button>这种写法会被浏览器直接阻止执行。

你需要改成JS动态绑定事件：
先给按钮加个ID：

<button id="addBtn">Add</button>

然后在脚本里添加事件监听：

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('addBtn').addEventListener('click', add);
});

二、Chrome App环境的配置要求 #

除了代码修复，还要确保你的App配置正确：

1. manifest.json必须正确声明页面
   Chrome App需要通过manifest.json配置入口，比如：

{
  "manifest_version": 2,
  "name": "Cash Register",
  "version": "1.0",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

然后在background.js里写启动逻辑，打开你的HTML页面：

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('your-html-file.html', {
    bounds: {
      width: 800,
      height: 600
    }
  });
});

2. 不要修改默认CSP
   Chrome App默认的CSP已经限制了脚本来源，不要随意添加unsafe-inline之类的规则，保持默认配置即可。

三、修复后的完整代码示例 #

这里给你整理了修复后的完整HTML代码：

<!DOCTYPE html>
<html>
<body>
  <h1>Cash Register</h1>
  <!-- 输入框 -->
  <input type="text" id="myText1" value="Name">
  <input type="text" id="myText2" value="Price">
  <!-- 添加按钮 -->
  <button id="addBtn">Add</button>
  <!-- 总价展示区域 -->
  <div id="div1">
    <h2 id="demo1"></h2>
    <h2 id="demo2"></h2>
  </div>

  <script>
    // 核心添加函数
    function add() {
      const totalLabel = 'Total:';
      const price = document.getElementById("myText2").value;
      const itemName = document.getElementById("myText1").value;
      const container = document.getElementById("div1");

      // 添加分隔线
      let separator = document.createElement("h4");
      separator.appendChild(document.createTextNode('_____'));
      container.appendChild(separator);

      // 添加商品名称
      let itemElement = document.createElement("h4");
      itemElement.appendChild(document.createTextNode(itemName));
      container.appendChild(itemElement);

      // 添加商品价格
      let priceElement = document.createElement("p");
      priceElement.appendChild(document.createTextNode(price));
      container.appendChild(priceElement);

      // 计算总价
      const allPrices = document.getElementsByTagName("p");
      let total = 0;
      for (let i = 0; i < allPrices.length; i++) {
        total += parseInt(allPrices[i].innerText, 10) || 0;
      }

      // 更新总价展示
      document.getElementById("demo1").textContent = totalLabel;
      document.getElementById("demo2").textContent = total;
    }

    // 绑定按钮点击事件
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('addBtn').addEventListener('click', add);
    });
  </script>
</body>
</html>

四、额外调试建议 #

• 打开Chrome App后，右键选择「检查」，查看Console面板的错误信息，这是快速定位问题的最佳方式；
• 你提到的jshint警告，修复上面的问题后（比如重复var声明、缺少分号、未指定parseInt基数），大部分警告都会消失。

内容的提问来源于stack exchange，提问作者Ethan P