使用 wxt 框架开发浏览器扩展遇到的问题?

Question

这是 A 扩展注入的 content 代码

export default defineContentScript({
  matches: ['<all_urls>'],
  cssInjectionMode: 'ui',
  runAt: 'document_end',
  async main(ctx) {
    console.log('执行 main 函数');
    const ui = await createShadowRootUi(ctx, {
      name: 'example-ui',
      position: 'inline',
      onMount: (uiContainer) => {
        console.log('执行 onMount 函数');
        const app = document.createElement('div');
        uiContainer.append(app);
        const root = createRoot(app);
        root.render(
          <StrictMode>
            <App></App>
          </StrictMode>,
        );
        return root;
      },
      onRemove: (root) => {
        console.log('执行 unmount 函数');
        root?.unmount();
      },
    });
    ui.mount();
  },
});

这是 B 扩展注入的 content 代码

export default defineContentScript({
  matches: ['<all_urls>'],
  async main(ctx) {
    // 给 window 注入 __cls-context__  表示这个是 content 脚本
    window['__cls-context__'] = 'content';
    const ui = await createIntegratedUi(ctx, {
      position: 'inline',
      onMount: (uiContainer) => {
        const app = document.createElement('div');
        uiContainer.append(app);
        const root = createRoot(app);
        root.render(
          <StrictMode>
            <App></App>
          </StrictMode>,
        );
        return root;
      },
      onRemove: (root) => {
        root?.unmount();
      },
    });
    ui.mount();
  },
});

这两个扩展都独立打包。
有用户反映装了 B 扩展后 A 扩展就失效了,通过调试发现如果扩展 B 安装后,扩展 A 的 unmount 函数就会执行,导致扩展 A 的功能不见了。
不知道大家在使用 wxt 时是否遇到这种问题,这问题感觉太奇怪了

Answer 1

使用 Shadow DOM 来隔离它们的样式和 DOM 结构，这样两个扩展不会相互干扰。

A扩展的改动

在 onMount 函数中，添加了 Shadow DOM 的创建：

const shadowRoot = uiContainer.attachShadow({ mode: 'open' });
const app = document.createElement('div');
shadowRoot.append(app);

B扩展的改动

同样在 onMount 函数中，添加了 Shadow DOM 的创建：

const shadowRoot = uiContainer.attachShadow({ mode: 'open' });
const app = document.createElement('div');
shadowRoot.append(app);

完整改动示例

A 扩展的 content 代码

export default defineContentScript({
  matches: ['<all_urls>'],
  cssInjectionMode: 'ui',
  runAt: 'document_end',
  async main(ctx) {
    console.log('执行 main 函数');
    const ui = await createShadowRootUi(ctx, {
      name: 'example-ui',
      position: 'inline',
      onMount: (uiContainer) => {
        console.log('执行 onMount 函数');
        const shadowRoot = uiContainer.attachShadow({ mode: 'open' }); // 添加了这行
        const app = document.createElement('div');
        shadowRoot.append(app); // 修改了这行
        const root = createRoot(app);
        root.render(
          <StrictMode>
            <App></App>
          </StrictMode>,
        );
        return root;
      },
      onRemove: (root) => {
        console.log('执行 unmount 函数');
        root?.unmount();
      },
    });
    ui.mount();
  },
});

B 扩展的 content 代码

export default defineContentScript({
  matches: ['<all_urls>'],
  async main(ctx) {
    // 给 window 注入 __cls-context__ 表示这个是 content 脚本
    window['__cls-context__'] = 'content';
    const ui = await createIntegratedUi(ctx, {
      position: 'inline',
      onMount: (uiContainer) => {
        const shadowRoot = uiContainer.attachShadow({ mode: 'open' }); // 添加了这行
        const app = document.createElement('div');
        shadowRoot.append(app); // 修改了这行
        const root = createRoot(app);
        root.render(
          <StrictMode>
            <App></App>
          </StrictMode>,
        );
        return root;
      },
      onRemove: (root) => {
        root?.unmount();
      },
    });
    ui.mount();
  },
});