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

Question

I would like to use Tippy.js in a simple Chrome Extension I am building. Basically, I want to use Tippy alongside my content script, but I do not know how to include it without using the cdn.

I know I should include it in the manifest.json file with the content_scripts, but you are not supposed to use a cdn link here. If I install the package with node, I get all the files found here: https://unpkg.com/browse/tippy.js@4.3.5/ but I'm not sure which one to link in the manifest file.

Here is what I currently have in my manifest.json:

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

I realize this is probably a silly attempt at including the external library, but I'm just not sure how to include libraries like this that don't come packaged in a single file.

Do you use any template generator to generate your chrome extension project? — Toan Quoc Ho, Sep 26 '19 at 23:42
I prefer you to use this generator: https://github.com/yeoman/generator-chrome-extension, it allows us to generate a template and we can start to develop Chrome Extension really quick, and the bundle will be smaller after uglified and minified. — Toan Quoc Ho, Sep 27 '19 at 06:15

score 0 · Accepted Answer · answered Sep 27 '19 at 04:04

0

For tippy.js you need popper.js as well

Save this two files in your project 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

Add this two files in the content script, like you have added

answered Sep 27 '19 at 04:04

Pranoy Sarkar

1,965
14
31

i downloaded and added both of these scripts to my content_scripts section under js and it gives me the error still that tippy is undefined :( – James Pog Sep 24 '22 at 01:20
@JamesRiback Hi. Did you get some solution of this? – Maheer Ali Nov 30 '22 at 14:42

score 0 · Answer 2 · answered Sep 27 '19 at 06:38

Umd is a choice in this case, because Chrome Extension didn't support import and export keywords, so choose node_modules/tippy.js/umd/index.min.js and make sure that node_modules is at the same directory as your manifest.json file.

"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"
            ]
        }
]

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

2 Answers2