如何在浏览器扩展中动态附加内容脚本。？答案

【问题标题】：How to dynamically append the content script in browser extension.?如何在浏览器扩展中动态附加内容脚本。？
【发布时间】：2021-06-08 09:28:44
【问题描述】：

我正在尝试将脚本附加到 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 错误。

我该如何解决这个问题？

【问题讨论】：

DOM script 在页面上下文中运行，而不是在内容脚本的“孤立世界”中运行。见this answer。
很难理解您在尝试什么？有一个 bg 脚本、一个内容和一个 myScript。内容和 bg 已成功运行。您从内容向您的 bg 发送一条消息，并作为回调在您的内容脚本中运行一个函数。您的 bg 运行并获取 myScript 并将其作为 JSON 发送到您的内容脚本。这应该是您可以在 console.log("contetn js"); 中看到的数据。您还运行一个现在称为 localStorage() 的函数。我的理解正确吗？你正在做这一切，因为你想在加载 bg 和内容之后执行第二个脚本。
另外，请在调用 localStorage() 之前记录数据。 loadPopup() 将是未定义的，因为它没有在脚本中的任何地方定义。在记录数据时检查正在记录的内容，它可能会让您更好地了解如何调用此函数。

标签： javascript google-chrome-extension

【解决方案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
});

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

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

【讨论】：