解决CookieConsent在Chrome中模态框不显示的问题

问题现象分析

在使用vanilla-cookieconsent库时，开发者可能会遇到一个特殊问题：在Chrome浏览器中，Cookie同意弹窗和偏好设置模态框无法正常显示。这个问题尤其容易出现在以下场景中：

1. 通过VSCode调试工具启动的Chrome实例
2. 使用Selenium等自动化测试工具控制的Chrome浏览器
3. 某些特定环境下的Chrome浏览器

根本原因

经过深入分析，这个问题主要由两个关键因素导致：

1. 浏览器环境检测机制：vanilla-cookieconsent默认会检测浏览器环境，如果判断为机器人访问（如自动化测试工具），则会自动隐藏模态框。

2. 双重初始化问题：在Angular等框架中，如果初始化脚本被意外加载多次，Chrome浏览器可能会因为重复注册事件监听器而出现问题。

解决方案

针对自动化测试场景

对于使用Selenium等自动化测试工具的情况，可以通过修改配置参数来解决：

const cc = initCookieConsent({
    hideFromBots: false,  // 显式设置为false，允许在自动化测试中显示
    // 其他配置...
});

针对Angular框架集成

在Angular项目中，确保以下几点：

1. 客户端渲染：确保插件只在客户端加载，避免服务端渲染(SSR)时执行。

2. 单次初始化：检查是否有多处代码调用了初始化函数，确保只初始化一次。

3. 正确的事件绑定：使用官方推荐的方式绑定事件：

<!-- 正确的方式 -->
<button type="button" data-cc="show-preferencesModal">
    管理Cookie偏好设置
</button>

针对开发环境问题

对于VSCode调试工具启动的Chrome实例，可以尝试：

1. 直接在常规Chrome窗口中测试
2. 检查是否有浏览器扩展干扰了模态框显示
3. 清除浏览器缓存后重新测试

最佳实践建议

1. 环境检测配置：根据实际需求合理设置hideFromBots参数，开发环境可以设为false，生产环境保持true。

2. 错误处理：在调用CookieConsent.showPreferences()时添加错误处理逻辑：

try {
    CookieConsent.showPreferences();
} catch (error) {
    console.error('显示偏好设置失败:', error);
    // 备用处理逻辑
}

3. 版本兼容性：确保使用的vanilla-cookieconsent版本与项目框架版本兼容。

通过以上方法，开发者可以有效解决CookieConsent在Chrome中模态框不显示的问题，确保功能在各种环境下都能正常工作。