如何使用浮动 UI 作为 Chrome 扩展内容脚本？

Question

目标是使用 Chrome 扩展将工具提示插入网页上的特定元素。

我尝试使用浮动 UI 的 ESM 版本 作为内容脚本，但收到此错误：

未捕获的语法错误：无法在模块外部使用 import 语句

从“/npm/@floating-ui/[email protected]/+esm”导入{computePosition as t,rectToClientRect as e};

清单看起来像这样：

  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "floating-esm.js",
        "content.js"
      ],
      "type": "module",
      "css": [
        "tooltips.css"
      ]
    }
  ],

期望能够访问主内容脚本文件中的computePosition函数。

Answer 1

本质上导入了 Core 和 Dom，并更改了 update() 函数，有点像包含 window.FloatingUIDOM 和 window.FloatingUICore:

    window.FloatingUIDOM.computePosition(markedDiv, tooltip, {
  placement: "top",
  middleware: [
    window.FloatingUICore.offset(6),
    window.FloatingUIDOM.flip(),
    window.FloatingUIDOM.shift({ padding: 5 }),
    window.FloatingUIDOM.arrow({ element: arrowElement }),
  ],
})

我认为在他们最初的示例代码中，markedDiv 被称为“按钮”，但这并不重要。