Pixi.js在Chrome扩展中禁用eval的解决方案

背景介绍

Pixi.js是一个流行的2D渲染引擎，广泛应用于Web游戏和交互式内容开发。随着Chrome扩展安全策略的升级，manifest v3版本中完全禁用了eval等不安全操作，这给使用Pixi.js开发Chrome扩展的开发者带来了挑战。

问题分析

在Chrome扩展manifest v3环境下，直接使用Pixi.js会遇到"Current environment does not allow unsafe-eval"错误。这是因为Pixi.js的某些功能（特别是spine动画支持）内部使用了eval操作，而manifest v3出于安全考虑禁止了这类操作。

解决方案

版本兼容性

通过实践发现，Pixi.js 6.5.10版本配合@pixi/unsafe-eval 6.5.10和pixi-spine 3.1.2能够正常工作。这是目前已知在Chrome扩展manifest v3环境下稳定运行的版本组合。

关键配置

1. 依赖版本控制：

"dependencies": {
    "@pixi/unsafe-eval": "6.5.10",
    "pixi-spine": "^3.1.2",
    "pixi.js": "^6.5.10"
}

2. TypeScript配置： 确保tsconfig.json中设置"module": "es6"，这是现代JavaScript模块化的标准方式。

代码实现

以下是经过验证可用的Pixi.js spine动画加载代码示例：

import { Application } from "pixi.js";
import { Spine } from "pixi-spine";

(async () => {
    const app = new Application({
        backgroundColor: 0x000000,
        width: 200,
        height: 140,
        backgroundAlpha: 0,
    });
    app.stage.interactive = true;
    document.body.appendChild(app.view);

    const loader = app.loader.add("spineboy", "/assets/cat.json");

    loader.load((loader, res) => {
        const spineboy = new Spine(res.spineboy.spineData);
        spineboy.scale.set(0.35);
        spineboy.state.setAnimation(0, "Idle", true);
        spineboy.x = 0;
        spineboy.y = 0;
        spineboy.position.set(80, 140);
        app.stage.addChild(spineboy);
    });
})();

注意事项

1. 资源路径需要正确配置，确保Chrome扩展的web_accessible_resources中包含了所需的资源文件。

2. 动画资源文件（如.json和.atlas文件）需要放在扩展包内的特定目录下，并通过相对路径引用。

3. 不同版本的Pixi.js API可能有差异，如果升级版本需要全面测试兼容性。

总结

在Chrome扩展manifest v3环境下使用Pixi.js需要特别注意版本兼容性和安全限制。通过选择合适的版本组合和正确的配置方式，开发者仍然可以在保证安全性的前提下实现丰富的2D动画效果。随着Pixi.js的持续更新，未来可能会有更好的解决方案出现，开发者应保持对官方更新的关注。