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

Question

这是我的流程：内容脚本 -> 使用 background.js 获取数据 -> Return 数据并将新的 HTML 注入网页。

现在我必须使用 Popper.js 显示工具提示，但我收到错误“文档”未定义。这很奇怪，因为我在 content-scripts.js。注射后如何获得新更新的dom？

内容-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

已解决。

我不得不导入 tippy.js。

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


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

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

Inject Popper.js in Chrome Extension Content script

javascript

google-chrome-extension