如何通過內容腳本將模板中的 HTML 插入 Chrome 擴展程序中的 div

Question

現在我正在運行獲取本地模板 URL 並創建一個 div 以將其插入。

我的模板內部是一個簡單的<h3>Hello World</h3>

var newDiv = document.createElement('div');
const template = chrome.runtime.getURL("template.html");

如何將template的內容插入到我的newDiv.innerHTML ？

Answer 1

您可以使用element.innerHTML = ...向元素添加 HTML 內容。
您可以使用XMLHttpRequest獲取模板內容。

看看這個：

function getTemplate(url, success) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {

        // If the request doesn't have an error status code,
        // the contents of the loaded URL (request.responseText) are sent
        // to the callback function (success).

        if (request.readyState === 4 && request.status === 200) 
            success(request.responseText);
    }
    request.open("GET", url, false);
    request.send();
}

您可以使用如下代碼所示的函數。 它對success參數使用回調函數，您必須指定該回調函數。

getTemplate(url, function(responseText) {
    document.write(responseText);
    // or add the responseText to your div with: yourDiv.innerHTML += responseText;
});

請注意，當您嘗試從不同來源（例如計算機上的不同文件，或者當您嘗試從站點 B 上的腳本加載站點 A 的內容時）加載內容時，請求通常會失敗。