Chrome扩展中如何跨文件正确引用constants.js的常量？

问题根源 #

1. constants.js 未使用ES模块语法导出变量，导致其他文件无法正确引用
2. Chrome扩展默认不启用ES模块系统，直接使用import/export会引发作用域异常，导致回调函数内无法访问导入的变量
3. 代码中存在未声明的变量（truncatedUrl、siteIndex），可能引发全局作用域污染，干扰变量访问

分步解决方案 #

1. 修正constants.js的导出 #

修改constants.js，使用ES模块语法导出常量：

export const domains = ['target.com', 'amazon.com', '88rising.com'];

2. 在目标文件中正确导入 #

删除代码开头手动定义的const domains = [...]，替换为导入语句（路径需与constants.js的实际位置匹配）：

import { domains } from './constants.js';

3. 配置Chrome扩展启用模块系统 #

根据脚本的使用场景，开启模块支持：

• 内容脚本场景：在manifest.json的content_scripts字段中添加"type": "module"，同时配置资源可访问性：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["your-script.js"],
      "type": "module"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["constants.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

• Popup页面脚本场景：在popup.html的<script>标签中添加type="module"：

<script src="your-script.js" type="module"></script>

4. 修复代码中的作用域问题 #

给未声明的变量添加const声明，避免全局污染：

import { domains } from './constants.js';

document.addEventListener('DOMContentLoaded', () => {
    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
      
      const currentUrl = tabs[0].url;
      const truncatedUrlElement = document.getElementById('truncated-url');
      const siteIndexElement = document.getElementById('index-number');

      const truncatedUrl = new URL(currentUrl).hostname.replace(/^www\./, '');
      truncatedUrlElement.textContent = truncatedUrl;
      console.log(truncatedUrl)
      
      const siteIndex = domains.indexOf(truncatedUrl) + 1;
      siteIndexElement.textContent = siteIndex.toString();
    });
});

内容的提问来源于stack exchange，提问作者Alex Kim