DOMオブジェクトを任意のWebページに挿入

Question

Webページの左側にツールバーを追加する基本的なクロム拡張を作成しようとしています。

私は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"); 

これは最もウェブページではなく、すべての左側にスペースを作成します。私は、Webページに要素を追加しよう：

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

これは、Webページの一番下に要素を追加しているようだが、同様に、いくつかの奇妙なエラーがあります。いくつかのWebページでは、下部に表示されません。いくつかのWebページでは、複数回作成されます。私はそれを私が作成した左の余白にどのように移動するかを考え出すことはほとんどありませんでした。

私は現在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>

EDIT：

しかし、あなたがページにサイドバーを挿入する必要がある場合、あなたは次のことを試みることができる：

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へのページの内容、それはあなたの隣にそれを配置する柔軟性を与えるだろうアイデアバー。しかし、いくつかのエッジケースでは、一度小さな幅にするとうまく動作するとは保証できないので、コンテンツの外観を破壊する可能性があることに注意してください。