Skip to content

2.0 升级常见问题

代码兼容性检查

1、find 系列接口 已废弃,请使用 findAsync 等接口代替, 示例如下:

ts
const adapt_findAll = async (node: any, cb?: (node: any) => boolean) => {
  if (pixso.apiVersion === "1.0.0") {
    return node.findAll(cb);
  } else {
    return (await (node as any).findAllAsync()).filter(cb);
  }
};

2、2.0 插件 iframe 改为 null origin iframe ,从 UI 向插件代码传递数据时,需要显示指定 parentOrigin 为 *

ts
window.parent.postMessage({ pluginMessage: "这是一条消息" }, "*");

3、升级 @pixso/plugin-cli 到 1.0.8 及以上版本 (错误事例(提示调试的插件内容缺失))

bash
npm install @pixso/plugin-cli@latest -D

4、localStorage 等 Web API 在 null origin iframe 中不可用,请使用 pixso.clientStorage 代替,如果是第三方库使用的 localStorage,可使用以下兼容方案

ts
// ui.html
<!DOCTYPE html>
<html>

<head>
    <title>plugin</title>
    <script>
        // localStorage polyfill - 必须在所有其他脚本之前执行
        // 在 data: URLs 或 document.write 注入的页面中,localStorage 会抛出 SecurityError
        (function() {
            let needsPolyfill = false;
            try {
                localStorage.getItem('test');
            } catch (e) {
                needsPolyfill = true;
            }

            if (needsPolyfill) {
                const memoryStorage = {};
                
                Object.defineProperty(window, 'localStorage', {
                    value: {
                        getItem: function(key) {
                            return memoryStorage[key] || null;
                        },
                        setItem: function(key, value) {
                            memoryStorage[key] = String(value);
                        },
                        removeItem: function(key) {
                            delete memoryStorage[key];
                        },
                        clear: function() {
                            for (const key in memoryStorage) {
                                delete memoryStorage[key];
                            }
                        },
                        key: function(index) {
                            const keys = Object.keys(memoryStorage);
                            return keys[index] || null;
                        },
                        get length() {
                            return Object.keys(memoryStorage).length;
                        }
                    },
                    writable: true,
                    configurable: true
                });
            }
        })();
    </script>
</head>

<body>
    <div id="app"></div>
</body>

</html>

其他问题

1、mainfest 中的 host 配置已废弃

ts
  // 旧配置,已不支持
  "main": {
    "sandbox": "dist/main.js",
    "host": "dist/host.js"
  }
  // 新配置
  "main": "dist/main.js"