在 Chrome 擴展內容腳本中注入 Popper.js

Question

這是我的流程：內容腳本 -> 使用 background.js 獲取數據 -> 返回數據並將新的 HTML 注入網頁。

現在我必須使用 Popper.js 顯示一個工具提示，但我得到錯誤“文檔”未定義。 這很奇怪，因為我在 content-scripts.js 中。 注入后如何獲取新更新的 dom？

內容腳本.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

解決了。

我不得不導入tippy.js。

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


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