如何在 Google Chrome 内容脚本中使用 Tippy.js？

Question

我想在我正在构建的简单 Chrome 扩展中使用 Tippy.js。基本上，我想在我的内容脚本旁边使用 Tippy，但我不知道如何在不使用 cdn 的情况下包含它。

我知道我应该将它与 content_scripts 一起包含在 manifest.json 文件中，但您不应该在这里使用 cdn link。如果我用节点安装包，我会在此处找到所有文件：https://unpkg.com/browse/tippy.js@4.3.5/ 但我不确定要 link 清单文件中的哪个文件。

这是我目前在 manifest.json 中的内容：

"content_scripts": [
        {
            "matches":[
                "<all_urls>"
            ],
            "js": [
                "./node_modules/tippy.js/umd/index.min.js",
                "./src/content.js"]
        }
    ],

我意识到这可能是一个愚蠢的包含外部库的尝试，但我只是不确定如何包含像这样没有打包在单个文件中的库。

Answer 1

对于 tippy.js 你还需要 popper.js

将这两个文件保存到你的项目中 https://unpkg.com/popper.js@1.15.0/dist/umd/popper.min.js https://unpkg.com/tippy.js@4.3.5/umd/index.all.min.js

在内容脚本中添加这两个文件，就像您添加的那样

Answer 2

Umd 在这种情况下是一个选择，因为 Chrome 扩展不支持 import 和 export 关键字，所以选择 node_modules/tippy.js/umd/index.min.js 并确保 node_modules 与您的 manifest.json 文件位于同一目录。

"content_scripts": [
        {
            "matches":[
                "<all_urls>"
            ],
            "js": [
                "node_modules/tippy.js/umd/index.min.js",
                "src/content.js"
            ],
            "css": [
                "node_modules/tippy.js/themes/light.css"
            ]
        }
]

如何在 Google Chrome 内容脚本中使用 Tippy.js？

How can I use Tippy.js in a Google Chrome content script?

google-chrome-extension

content-script

tippyjs