javascript - 如何在浏览器扩展中动态附加内容脚本？

Question

我正在尝试将脚本附加到 API 响应的内容脚本上。

以下是content.js

    locationHref = window.location.href;
    chrome.runtime.sendMessage({
        action: locationHref,
        value: false
    }, function (data) {
        localStorage();
        console.log('contetn js ', data);
    });

    function localStorage() {
        chrome.storage.local.get('script', (items) => {
            var s = document.createElement("script");
            s.type = "text/javascript";
            s.innerHTML = items.script;
            document.body.appendChild(s);
            if (items.responseData) {
                setTimeout((r) => {

                    loadPopUp(items.responseData); // this method is not triggering

                }, 5000);
            }
        });
    }

下面是background.js文件

    chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
        fetchData(msg.action, sendResponse);
        return true;
    });


    function fetchData(url, sendResponse) {
        fetch("myscript.js", {
                method: 'GET',
            }).then(res => res.json())
            .then(response => {
                chrome.storage.local.set({
                    "script": response
                }, function () {});
                sendResponse(response);
            }).catch(error => {
                console.log(error)
            });
    }

myscript.js 有如下代码。

function loadPopUp(data) {
        document.body.insertAdjacentHTML('beforeend', `<h4 style="color:white; font-size: 25px; text-align: center; margin-top: 15px;">
        ${data.name} has <span style="font-weight:bold">${data.count}</span> gene count</h4>`)
}

API 响应有 loadPopUp() 方法，在创建脚本标记后我试图调用 loadPopup 方法但它给出了 undefined 错误。

我该如何解决这个问题？

Answer 1

我在嵌入式环境(即我无法访问主页代码的地方)中成功地将脚本直接加载到头部。

这是我的做法。

const exampleScript = {
   name: "p5.js",
   src: "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js",
   id: "p5-script"
};

const loadScript = (scriptToLoad, callback) => {
    let script = document.createElement("script");
    script.src = scriptToLoad.src;
    script.id = scriptToLoad.id;
    script.onload = () => { 
        callback();
    }
    script.onerror = (e) => console.error("error loading" +  scriptToLoad.name + "script", e);
    document.head.append(script);
}

loadScript(exampleScript, () => {
   //...whatever you do after loading the script
});

您可能遇到的问题是将其加载到 body 而不是头部。

这是一篇解释它的文章。 https://aaronsmith.online/easily-load-an-external-script-using-javascript/