在Chrome擴展內容切換div-script

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); 
});