Best practices for injecting into different DOM locations

[Ya-hui]

index.ts

import App from './index.vue'
export default defineContentScript({
  matches: ['*://re.baidu.com/', '*://www.baidu.com/'],
  async main(ctx) {
    const ui = createIntegratedUi(ctx, {
      position: 'inline',
      append: 'after',
      onMount: (container) => {
        const app = createApp(App)
        app.mount(container)
        return app
      },
      onRemove: (app) => {
        app?.unmount()
      }
    })
    ui.mount()
  }
})

index.vue

onMounted(() => {
  //re.baidu.com
  document.querySelector('.offer-list-main')?.addEventListener('mouseover', bindMouseEvents)
  document.querySelector('.offer-list-main')?.addEventListener('mouseout', bindMouseEvents)
  //www.baidu.com
  document.querySelector('.list-container')?.addEventListener('mouseover', bindMouseEvents)
  document.querySelector('.list-container')?.addEventListener('mouseout', bindMouseEvents)
})

Should I make a judgment on the different DOM attributes of different pages in index.ts and then anchor()=>{} or in my Vue template

[1natsu172]

@Ya-hui Best practice depends on the properties of the application. However, I personally think it is better to branch at the top level. That way, there is more flexibility when it is necessary to separate them.

import App from './index.vue'
export default defineContentScript({
  matches: ['*://re.baidu.com/', '*://www.baidu.com/'],
  async main(ctx) {
    const reUi = createIntegratedUi(ctx, {
      position: 'inline',
      append: 'after',
      anchor: '.offer-list-main',
      onMount: (container) => {
        // Point1: This way you can also inject application context
        const app = createApp(App, {mode: "re.baidu"})
        app.mount(container)
        return app
      },
      onRemove: (app) => {
        app?.unmount()
      }
    })
    
    const wwwUi = createIntegratedUi(ctx, {
      position: 'inline',
      append: 'after',
      anchor: '.list-container',
      onMount: (container) => {
        const app = createApp(App, {mode: "www.baidu"})
        app.mount(container)
        return app
      },
      onRemove: (app) => {
        app?.unmount()
      }
    })
    
    // Point2: Can detect redirects and switch mounts in the future.
    if (location.hostname === 'www.baidu.com') {
      reUi.mount()
    }
    if (location.hostname === 're.baidu.com') {
      wwwUi.mount()
    }
  }
})

It would be easier to switch contexts and mount/unmount at the top level, for example, for A/B testing and beta releases. It is also possible to stop using vue and switch to another framework in the future.

[Ya-hui]

Very good. Thank you!

[Ya-hui]

@1natsu172 If the browser is not refreshed, the third party switches pages through the routing Hash. I need to re-inject content_ui. How can I re-Ui.mount() in index.ts?

[1natsu172]

It's a JavaScript. Use reactive location libraries such as History or Navigo to detect hash changes and call the mount function.

OR

Do the same thing with routing on the UI framework. However, this method will not work if the routing deletes the UI framework instance.

import App from './index.vue'
export default defineContentScript({
  matches: ['*://re.baidu.com/', '*://www.baidu.com/'],
  async main(ctx) {
    let remountReUi: (()=>void) | undefined = undefined
    const reUi = createIntegratedUi(ctx, {
      position: 'inline',
      append: 'after',
      anchor: '.offer-list-main',
      onMount: (container) => {
        // Pass function via context and call from framework
        const app = createApp(App, {remountFn: remountReUi })
        app.mount(container)
        return app
      },
      onRemove: (app) => {
        app?.unmount()
      }
    })
    remountReUi = ()=> reUi.mount
    reUi.mount()
  }
})