將DOM對象插入任何網頁

Question

我正在嘗試創建一個基本的Chrome擴展，它將工具欄添加到任何網頁的左側。

我想創建左側的空間，然後我可以填充DOM元素。

我創建使用style.setProperty（）空間：

document.body.style.removeProperty("transform"); 
document.body.style.removeProperty("-webkit-transform"); 

document.body.style.setProperty("width", "90%", "important"); 
document.body.style.setProperty("margin-left", "10%", "important"); 

這造成對最網頁左側的空間，但不是全部。然後我嘗試的元素添加到網頁：

var toolbar = document.createElement("div"); 
toolbar.style.setProperty("color", "red"); 
toolbar.style.setProperty("left", "-10%"); 
toolbar.style.setProperty("top", "0px", "important"); 
var testText = document.createTextNode("Buttons will go here"); 

toolbar.appendChild(testText); 

document.body.appendChild(toolbar); 

這似乎是一個元素添加到網頁的底部，但有一些奇怪的錯誤，以及。在某些網頁中，它不會顯示在底部，有些網頁會多次創建。我幾乎沒有想到如何將它移到我爲它創建的左邊空白處。

我目前調用腳本從eventPage.js文件改變頁面：

chrome.webNavigation.onCompleted.addListener(function (details) { 
    chrome.tabs.executeScript(details.tabId, { 
     file: "createSpace.js" 
    }); 
}); 

並最終拿到了我的問題：

1. 你可以創建一個保證金中的對象？
2. 如何將CSS（移動頁面以創建左手空間）應用於整個網頁？
3. 如果您不知道頁面將具有哪些元素（因爲它應該適用於所有元素），您如何選擇將DOM對象放在哪裏？

Answer 1

強制整個佈局移動以便爲您的工具欄騰出空間可能證明不可預知。相反，我建議你帶上一個滑動的工具欄，當你不在它上面時，它會自動隱藏。

#slideout { 
 
    position: fixed; 
 
    background-color: #aaa; 
 
    border: 1px solid #aaa; 
 
    top: 40px; 
 
    left: 0; 
 
    height: 50px; 
 
    -webkit-transition-duration: 0.3s; 
 
    -moz-transition-duration: 0.3s; 
 
    -o-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
} 
 

 
#tab { 
 
    transform: rotate(90deg); 
 
    transform-origin: 22% 89%; 
 
    float: left; 
 
} 
 

 
#slideout_inner { 
 
    position: fixed; 
 
    background-color: #aaa; 
 
    height: 100vh; 
 
    width: 250px; 
 
    top: 0px; 
 
    left: -250px; 
 
    -webkit-transition-duration: 0.3s; 
 
    -moz-transition-duration: 0.3s; 
 
    -o-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
} 
 
#slideout:hover { 
 
    left: 250px; 
 
} 
 
#slideout:hover #slideout_inner { 
 
    left: 0; 
 
}

<div id="slideout"> 
 
    <div id="tab">Pull</div> 
 
    <div id="slideout_inner"> 
 
    <ul> 
 
     <li>Button 1</li> 
 
     <li>Button 2</li> 
 
     <li>Button 3</li> 
 
     <li>Button 4</li> 
 
     <li>Button 5</li> 
 
    </ul> 
 
    </div> 
 
</div>

編輯：

但是，如果必須插入側邊欄的頁面，你可以嘗試以下方法：

function insertSidebar() { 
    // Get all children of the body, and convert to array 
    var bodyElements = [].slice.call(document.body.children); 

    var sidebar = document.createElement('div'); 
    sidebar.id = 'my-sidebar'; 

    // insert whatever you want into the sidebar 

    sidebar.style.width = '20%'; 
    sidebar.style.height = '100vh'; 
    sidebar.style.backgroundColor = '#aaa'; 
    sidebar.style.position = 'fixed'; 
    sidebar.style.top = '0'; 
    sidebar.style.left = '0'; 

    var contentContainer = document.createElement('div'); 
    contentContainer.id = 'content-container'; 

    contentContainer.style.position = 'reltive'; 
    contentContainer.style.top = '0'; 
    contentContainer.style.left = '20%'; 

    // Move the elements to the contentContainer div 
    bodyElements.forEach(x => contentContainer.appendChild(x)); 

    document.body.appendChild(sidebar); 
    document.body.appendChild(contentContainer); 

    return sidebar; 
} 

這將所有移動將頁面內容轉換爲新的div，這將使您可以靈活地將其定位在s旁邊idebar。但是，請注意，在某些邊緣情況下，您可能會導致內容的外觀被破壞，因爲您無法保證一旦將其強制爲較小的寬度，它就會表現得很好。