在Chrome扩展程序内容脚本中切换div

Question

我正在尝试使用另一个链接来切换div，所有这些操作都是通过chrome扩展的内容脚本完成的，但是当我运行解压后的扩展时，我根本无法切换div ...任何想法？

下面是内容脚本的代码。

function createHistoryDiv() {
    var divHeight = 97;
    var divMargin = 10;

    var div = document.createElement("div");
        div.id = "history";
    var st = div.style;
    st.display = "block";
    st.zIndex = "10000000";
    st.top = "0px";
    st.left = "0px";
    st.right = "0px";
    st.height = divHeight + "%";
    st.background = "rgba(255, 255, 255, .01)";
    st.margin = divMargin + "px";
    st.padding = "5px";
    st.border = "5px solid black";
    st.color = "black";
        st.fontFamily = "sans-serif";       
        st.fontSize = "36";
    st.position = "fixed";
    st.overflow = "hidden";
    st.boxSizing = "border-box";
        st.pointerEvents = "none";

    document.documentElement.appendChild(div);
    var heightInPixels = parseInt(window.getComputedStyle(div).height);
    st.height = heightInPixels + 'px';
    //document.body.style.webkitTransform = "translateY("
            //+ (heightInPixels + (2 * divMargin))+ "px)";

    return div;
}

function buildDivContent(historyDiv, data) {
    var ul = document.createElement('ul');
    historyDiv.appendChild(ul);

    for (var i = 0, ie = data.length; i < ie; ++i) {
        var a = document.createElement('a');
        a.href = data[i];
        a.appendChild(document.createTextNode(data[i]));

        var li = document.createElement('li');
                li.style.color = "black";
                li.style.display = "inline";
                li.style.wordBreak = "break all";
        li.appendChild(a);
                a.style.color = "black";
                a.style.fontSize = "24px";
                a.style.fontFamily = "sans-serif";
                a.style.linkDecoration = "none";
        ul.appendChild(li);
    }
}

chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
    var historyDiv = createHistoryDiv();
    buildDivContent(historyDiv, data);
});

function logoDiv(){
var div2 = document.createElement("div");
div2.id = "logo";
        var st = div2.style;
    st.display = "block";
    st.zIndex = "10000001";
    st.bottom = "0px";
    //st.left = "0px";
    st.right = "0px";
    //st.height = "42px";
        //st.width = "210px";
    st.background = "rgba(255, 255, 255,1)";
    st.padding = "5px";
        st.margin = "10px";
    st.border = "5px solid black";
    st.color = "black";
        st.fontFamily = "sans-serif";       
    st.position = "fixed";
    st.overflow = "hidden";
    st.boxSizing = "border-box";
        //st.pointerEvents = "none";

            document.documentElement.appendChild(div2);
                div2.innerHTML = div2.innerHTML + "<a href=\"#\" onclick=\"toggle_visibility(\"history\");\" style = \"display:block;font-size:24px;font-family:sans-serif;margin:0;padding:5px;color:black;link-decoration:none;\">TRANSPARENCY</a>";
                //div2.innerHTML = div2.innerHTML + "<p style = \"display:block;font-size:24px;font-family:sans-serif;margin:0;padding:5px;color:black;\">TRANSPARENCY</p>";

                                             return div2;
    function toggle_visibility(id) {
       var e = document.getElementById("history");
       if(e.style.display == "block")
          e.style.display = "hidden";
       else
          e.style.display = "block";
    }

}

chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data){

    var titleDiv = logoDiv();
    buildDivContent(titleDiv);
});

Answer 1

您的代码存在各种问题（例如， display: hidden是不允许的键值对）。

因此，为了发挥作用，内容脚本应如下所示（应删除以下未包括的所有内容）：

function createHistoryDiv() {
    /* No change here. Place the code exactly
     * as it is in the code you posted */
}

function buildDivContent(historyDiv, data) {
    /* No change here. Place the code exactly
     * as it is in the code you posted */
}

function createToggleDiv(historyDiv) {

    /* Create the toggle div */
    var div = document.createElement("div");
    div.textContent = "TRANSPARENCY";

    /* Style the toggle div */
    var st = div.style;
    st.display = "block";
    st.zIndex = "10000001";
    st.bottom = "0px";
    st.right = "0px";
    st.background = "rgb(255, 255, 255)";
    st.padding = "10px";
    st.margin = "10px";
    st.border = "5px solid black";
    st.color = "black";
    st.fontFamily = "sans-serif";
    st.fontSize = "24px";
    st.position = "fixed";
    st.overflow = "hidden";
    st.boxSizing = "border-box";
    st.cursor = "pointer";

    /* Make the toggle div behave 
     * (i.e. toggle `historyDiv` upon 'click') */
    div.addEventListener("click", function(evt) {
        evt.preventDefault();
        var st = historyDiv.style;
        st.display = (st.display == "block") ? "none" : "block";
    });

    /* Insert the toggle div into the DOM */
    document.documentElement.appendChild(div);
}

chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
    var historyDiv = createHistoryDiv();
    var toggleDiv = createToggleDiv(historyDiv);
    buildDivContent(historyDiv, data);
});