クロムの現在のタブにhtmlを追加できない

Chromeの現在のタブ（Facebook）をスクロールするボタンを追加したいが、コードを追加するとスクロールのアイコンが機能しなくなるが、試してみるとw3schoolエミュレータでは動作します。クロムの現在のタブにhtmlを追加できない

私はそれをした後、ウェブサイトを開くたびにどのようにそれが維持されるのでしょうか？私は最終的に成功する

コード

<html> 
<head> 
<style> 
#myBtn { 
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: red; 
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 10px; 
} 

#myBtn:hover { 
    background-color: #555; 
} 
</style> 
</head> 
<body> 

<button onclick="topFunction()" id="myBtn" title="Go to top">Scroll</button> 


<script> 
// When the user scrolls down 20px from the top of the document, show the button 
window.onscroll = function() {scrollFunction()}; 

function scrollFunction() { 

     document.getElementById("myBtn").style.display = "block"; 

} 

// When the user clicks on the button, scroll to the top of the document 
function topFunction() { 
window.scrollBy(0,100); 
} 
</script> 

</body> 
</html>

出典

2017-06-10 Raz Luvaton

どのようにこのコードを追加していますか？あなたが訪問したすべてのウェブサイトに新しいコードを注入しようとしているのであれば、ブラウザの拡張機能を構築する必要がありますが、これはもちろん可能ですが単純ではありません。 –

@DanielBeckあなたがブラウザエクステンションを構築すると言ったように私は、ページ上にボタンを作り、ページをスクロールさせる方法を知る必要がありました。 –

OK。これは単なるスタンドアロンのWebページをコーディングするよりはるかに複雑です。ここから始め、その問題に固有の質問を残しておけば、https://developer.chrome.com/extensions/getstarted –

！

は、私は、ブラウザの拡張機能をダウンロード - Tampermonkeyが

そして（それはあなたがブラウザ拡張のようなサイトではJavaScriptを実行できます）をせずにHTML/CSS私はそれが

ここでは、これらの方法のためのコードですやっただけJSで（上にスクロールする）：

//scroll to top smooth scrolling 
var button = document.createElement ("Button"); 
button.innerHTML = "Top"; 
button.style = "display: none;bottom: 0px;right:0;position:fixed;z-index: 9999;border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 10px"; 
document.body.appendChild(button); 
window.onscroll = function() {scrollFunction();}; 

function scrollFunction() { 
    if (document.body.scrollTop > 75 || document.documentElement.scrollTop > 75) { 
     button.style.display = "block"; 
    } else { 
     button.style.display = "none"; 
    } 
} 
button.onmouseover=function() 
{ 
    button.style.backgroundColor="gray"; 
}; 
button.onmouseleave=function() 
{ 
    button.style.backgroundColor="red"; 
}; 
var i; 
button.onclick = function() 
{ 
    if(scrollY<500) 
     i=100; 
    else if(scrollY<1000) 
     i=125; 
    else if(scrollY<1500) 
     i=150; 
    else if(scrollY<2000) 
     i=175; 
    else if(scrollY<2500) 
     i=200; 
    else if(scrollY<10000) 
     i=((scrollY/2500)*100)+125; 
    else 
     i=((scrollY/5000)*100)+125; 
    doScrolling(0,i); 
}; 
function doScrolling(elementY, duration) { 
    var startingY = window.pageYOffset; 
    var diff = elementY - startingY; 
    var start; 

    // Bootstrap our animation - it will get called right before next frame shall be rendered. 
    window.requestAnimationFrame(function step(timestamp) { 
     if (!start) start = timestamp; 
     // Elapsed miliseconds since start of scrolling. 
     var time = timestamp - start; 
     // Get percent of completion in range [0, 1]. 
     var percent = Math.min(time/duration, 1); 

     window.scrollTo(0, startingY + diff * percent); 

     // Proceed with animation as long as we wanted it to. 
     if (time < duration) { 
      window.requestAnimationFrame(step); 
     } 
    }); 
}

出典

2017-06-17 22:51:00

クロムの現在のタブにhtmlを追加できない

答えて

関連する問題