如何在Chrome Extension中使用Moment.js并实现日期格式化

一、Moment.js导入步骤（本地引入方案，稳定无外部依赖） #

• 下载Moment.js的生产版压缩文件moment.min.js，放入你的Chrome扩展项目目录中，建议和content.js放在同一级目录
• 打开扩展的manifest.json配置文件，找到content_scripts配置项，在js数组中将moment.min.js放在content.js之前，示例配置如下（以Manifest V3为例）：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["moment.min.js", "content.js"]
    }
  ]
}

• 配置完成后无需在content.js中写额外的import语句，扩展注入脚本时会按顺序加载文件，Moment会自动挂载到全局window对象，可直接调用。

二、日期格式调整为MM/DD/YY的代码实现 #

你原有的content.js代码修改如下即可：

window.onload = () => {
  const input = document.createElement('input');

  input.id = "scheduleTime"
  input.className = "input-text-date";
  // 提示：原生type=date的输入框展示格式由浏览器语言决定，若要强制显示MM/DD/YY格式，建议改为type=text
  input.setAttribute('type', 'text');
  input.setAttribute('data-date-format', 'MM/DD/YY');
  input.setAttribute('data-date', '');

  // 调用Moment方法格式化当前日期
  input.value = moment().format('MM/DD/YY');

  document.querySelector(".game-scope").append(input);
}

三、无第三方库的轻量替代方案 #

如果不想引入Moment.js，也可以用原生JS直接实现相同格式的日期输出，代码如下：

const now = new Date();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const year = String(now.getFullYear()).slice(-2);
// 拼接后的格式就是MM/DD/YY
const formatDate = `${month}/${day}/${year}`;

内容的提问来源于stack exchange，提问作者Heng Seyha