在 Chrome 扩展内容脚本中注入 Popper.js

Question

This is my flow: Content script -> Fetch data using background.js -> Return data and inject the new HTML into the webpage.

Now I have to show a tooltip using Popper.js but I get the error "document" is undefined. It's strange because I am in content-scripts.js. How can I get the newly updated dom after my injection?

content-scripts.js

chrome.runtime.sendMessage({command: "sales_data", data: payload}, function(items) {
   let view = new SearchResultsView(items)
   view.injectToDom()
        
   const popcorn = document.querySelector('#popcorn'); // document is undefined
   const tooltip = document.querySelector('#tooltip'); // document is undefined
   createPopper(popcorn, tooltip, {
      placement: 'top',
   });

});

SearchResultsView/InjectDom()

   let html = `<div id="popcorn" aria-describedby="tooltip"></div>
                        <div id="tooltip" role="tooltip">
                        My tooltip
                        <div id="arrow" data-popper-arrow></div>
                        </div>`
    //...
    element.insertAdjacentHTML('afterbegin', html);

Answer 1

SOLVED.

I had to import tippy.js.

import { createPopper } from '@popperjs/core';
import tippy from 'tippy.js';


tippy('#button', {
   content: 'My tooltip!',
});