Twitter widget not working as content script

[m_dolr]

Hello,

I’m building a browser extension to preview links on any website just by hovering them. To achieve this I want to use the embed code provided by sites such as twitter/youtube/reddit/…
Here is an example of what I’d like to achieve. (Git repo)

I’ve already integrated reddit and had no problem using their equivalent of the twitter widget when injecting it as a content script. However when injecting twitter’s widget.js as a content script, it behaves weirdly.

Here is the code I use (I also tried to use createTweet but that’s also not working) :

twttr.ready(() => {
    console.log('Twttr ready!');

    twttr.events.bind('loaded', (event) => {
        console.log('Load event', event);
    });

    twttr.widgets.load().then(() => { console.log('Success?'); }).catch((error) => { console.log('Error', error); });
});

Also the manifest json :

"permissions": [
        "https://*/*",
        "http://*/*",
        "file:///*",
        "tabs",
        "activeTab"
      ],
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*",
                "file:///*/*"
            ],
            "js": [
                "js/utils/widget.js",
                "js/utils/twitter-load.js"
            ],
            "run_at": "document_end"
        }
    ]

Here is the console output (the pomise resolves even though a “twitter-tweet-error” class is added?)

Obviously nothing happens otherwise I wouldn’t be doing this forum post.
I’m really confused because the promise is not rejected and without an error message I don’t know how to fix this.

I need to inject the script as a content script for what I’m trying to achieve, I can’t use another injection method as the script would be rejected by the websites (I tried already). Even though tweets had no problem loading when injecting the script via the creation of a script element in the DOM.