Chrome扩展开发：单脚本 管理多个页面Content Script的最佳实践？

Question

问一个chrome插件开发的 问题

如果我有十几个页面都需要注入content_script 最合适的方案是在manifest.json 里去一一列出域名跟脚本 一个域名对应一个脚本文件， 还是<all_user> 统一由一个脚本去 获取到当前域名 然后if 判断加载那个脚本文件

Answer 1

export default defineContentScript({
  matches: ['*://*.example.com/'],
  // 2. Set cssInjectionMode
  cssInjectionMode: 'ui',
  async main(ctx) {
    // 3. Define your UI
    const ui = await createShadowRootUi(ctx, {
      name: 'example-ui',
      position: 'inline', 
      onMount: (uiContainer, shadow, shadowHost) => {
        // Container is a body, and React warns when creating a root on the body, so create a wrapper div
        console.log(uiContainer, shadow, shadowHost)
        const app = document.createElement('div');
        uiContainer.append(app);

        // Create a root on the UI container and render a component
        const root = ReactDOM.createRoot(app);
        root.render(<App />);
        return root;
      },
      onRemove: (root) => {
        // Unmount the root when the UI is removed
        root?.unmount();
      },
    });

    // 4. Mount the UI
    ui.mount();
  },
});

这是 wxt 框架注入 content-script 的代码。每一个文件使用 defineContentScript() 定义,然后根据这个定义来执行相应的注册,也就是列出域名跟脚本,一个域名对应一个脚本文件(实际上域名和脚本是多对多的)。这种方式可以更容易管理,也就是最好是由框架提供的能力来管理。