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

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

我知道我应该将它与content_脚本一起包含在manifest.json文件中，但这里不应该使用cdn链接。如果我安装带有节点的包，我会得到这里找到的所有文件：但我不确定在清单文件中链接哪个文件

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

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

“内容脚本”：[
{
“匹配项”：[
""
],
“js”：[
“/node_modules/tippy.js/umd/index.min.js”，
“/src/content.js”]
}
],

---

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

对于tippy.js，您还需要popper.js

在项目中保存这两个文件

---

将这两个文件添加到内容脚本中，就像您为tippy.js添加的一样，您还需要popper.js

在项目中保存这两个文件

---

在内容脚本中添加这两个文件，就像您在本例中添加的一样，Umd是一个选择，因为Chrome扩展不支持导入和导出关键字，因此，选择

node\u modules/tippy.js/umd/index.min.js

，并确保

node\u 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"
            ]
        }
]

“内容脚本”：[
{
“匹配项”：[
""
],
“js”：[
“node_modules/tippy.js/umd/index.min.js”，
“src/content.js”
],
“css”：[
“node_modules/tippy.js/themes/light.css”
]
}
]

Umd在这种情况下是一种选择，因为Chrome扩展不支持

import

和

export

关键字，所以选择

node\u modules/tippy.js/Umd/index.min.js

并确保

node\u 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"
            ]
        }
]

“内容脚本”：[
{
“匹配项”：[
""
],
“js”：[
“node_modules/tippy.js/umd/index.min.js”，
“src/content.js”
],
“css”：[
“node_modules/tippy.js/themes/light.css”
]
}
]

您是否使用任何模板生成器生成您的chrome扩展项目？不，我没有使用模板生成器。我希望您使用此生成器：，它允许我们生成模板，我们可以快速开始开发chrome扩展，并且在经过丑陋化和缩小后，捆绑包会更小。您是否使用任何模板生成器来生成您的chrome扩展项目？不，我没有使用模板生成器。我更希望您使用此生成器：，它允许我们生成模板，我们可以非常快地开始开发chrome扩展，经过丑陋化和缩小后，包裹会变小。