Content Script anchor may be null

[chshouyu]

export default defineContentScript({
  matches: ['https://www.example.com/search'],
  main(ctx) {
    const ui = createIntegratedUi(ctx, {
      anchor: '.result-info',
      append: 'after',
      position: 'inline',
      onMount: (container) => {
        
      },
    });

    ui.mount();
  },
});

I want to add some UI after the .result-info element, but on https://www.example.com/search, the element does not exist. It only exists on https://www.example.com/search?keyword=hello. How should I handle this situation?

[chshouyu]

I found a solution:

export default defineContentScript({
  matches: ['https://www.example.com/search'],
  main(ctx) {
    const ui = createIntegratedUi(ctx, {
      append(anchor, ui) {
        anchor.querySelector('.result-info')?.insertAdjacentElement('afterend', ui);
      },
      position: 'inline',
      onMount: (container) => {
        
      },
    });

    ui.mount();
  },
});

[aklinker1]

This works, but I'd recommend using a mutation observer to wait for the selector to be added to the DOM before calling mount.

[chshouyu]

Thank you for your reply. I didn't even think about controlling the timing of ui.mount execution. Since this webpage is server-side rendered, I think using an if statement should be good enough.

export default defineContentScript({
  matches: ['https://www.example.com/search'],
  main(ctx) {
    const ui = createIntegratedUi(ctx, {
      anchor: '.result-info',
      append: 'after',
      position: 'inline',
      onMount: (container) => {
        // 
      },
    });

    const anchor = document.querySelector('.result-info');

    if (anchor) {
      ui.mount();
    }
  },
});