Chrome货币转换扩展CSP报错、功能失效及图标显示问题求助

一、计算逻辑无结果显示问题 #

1. 确认事件绑定是否正确 #

之前的CSP报错源于内联onclick，现在必须改为JS绑定事件：

• 给按钮添加ID：<button id="calcBtn">Calculate</button>
• 在popup.js中确保DOM加载完成后绑定事件：

  document.addEventListener('DOMContentLoaded', () => {
    const calcBtn = document.getElementById('calcBtn');
    if (calcBtn) {
      calcBtn.addEventListener('click', calculate);
    } else {
      console.error('未找到Calculate按钮');
    }
  });
  

2. 排查计算函数的逻辑漏洞 #

右键popup页面打开开发者工具，查看Console面板的隐藏错误：

• 检查输入值获取：确保用parseFloat将输入框内容转为数字，比如const amount = parseFloat(document.getElementById('amountInput').value);，同时确认输入框ID与HTML一致
• 检查汇率计算：如果是从API获取汇率，要确认请求是否成功、返回值是否为有效数值；本地计算则检查公式是否正确
• 检查结果插入：确保结果容器的ID与HTML匹配，比如document.getElementById('resultDisplay').textContent = ${result.toFixed(2)} USD;

3. 确认CSP配置合规 #

manifest.json中不能包含unsafe-inline，正确配置示例：

"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self';"
}

二、Font Awesome TikTok图标不显示问题 #

1. 检查图标类名是否正确 #

TikTok属于品牌图标，必须携带fa-brands前缀：

<i class="fa-brands fa-tiktok"></i>

注：旧版本Font Awesome无此图标，建议使用v6.x版本。

2. 本地引入Font Awesome（规避CSP对CDN的限制） #

• 下载Font Awesome压缩包，将css和webfonts文件夹放到扩展根目录
• 在popup.html中用相对路径引入样式：

<link rel="stylesheet" href="./css/all.min.css">

3. 配置manifest允许访问字体资源 #

在manifest.json中添加：

"web_accessible_resources": [
  {
    "resources": ["webfonts/*"],
    "matches": ["<all_urls>"]
  }
]

注意字体文件路径需与实际存放位置一致。

内容的提问来源于stack exchange，提问作者Danijel Tomljenović