コンテンツはFirefoxでは表示されますが、Chromeでは表示されません

Question

現在、検索エンジンで作業しています。私は、ユーザが自分のブラウザでデフォルトとして検索エンジンを作るオプションを持っている機能を実装しました。

この機能は、ユーザーが検索エンジンサイトにリダイレクトするたびに右側の下部にオプションが表示されるタイプのボックスで実装されています。

私はそれが打たれている問題は、ボックスがFirefoxブラウザにのみ表示されることです。しかし、クロム/クロムブラウザではそうではありません。

$(document).ready(function() { 
 
    var isFirefox = typeof InstallTrigger !== 'undefined'; 
 

 
    if (isFirefox === false) { 
 
    $("#set-susper-default").remove(); 
 
    $(".input-group-btn").addClass("align-search-btn"); 
 
    $("#navbar-search").addClass("align-navsearch-btn"); 
 
    } 
 

 
    if (window.external && window.external.IsSearchProviderInstalled) { 
 
    var isInstalled = window.external.IsSearchProviderInstalled("http://susper.com"); 
 

 
    if (!isInstalled) { 
 
     $("#set-susper-default").show(); 
 
    } 
 
    } 
 

 
    $("#install-susper").on("click", function() { 
 
    window.external.AddSearchProvider("http://susper.com/susper.xml"); 
 
    }); 
 

 
    $("#cancel-installation").on("click", function() { 
 
    $("#set-susper-default").remove(); 
 
    }); 
 
});

#set-susper-default { 
 
    width: 250px; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    position: fixed; 
 
    right: 10px; 
 
    bottom: 60px; 
 
    background-clip: padding-box; 
 
    display: block; 
 
} 
 

 
#set-susper-default h3 { 
 
    margin: 0; 
 
    padding: 8px; 
 
    text-align: center; 
 
    background-color: #26547c; 
 
    color: white; 
 
} 
 

 
#set-susper-default ol { 
 
    font-size: 15px; 
 
    background-color: white; 
 
    margin: 0; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 

 
#set-susper-default button { 
 
    background-color: #26547c; 
 
    border: none; 
 
    color: white; 
 
    font-size: 15px; 
 
    padding: 3px; 
 
} 
 

 
#set-susper-default #cancel-installation { 
 
    width: 100%; 
 
} 
 

 
#set-susper-default #install-susper { 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="set-susper-default"> 
 
    <h3>Set Susper as your default search engine on Mozilla!</h3> 
 
    <ol> 
 
    <!-- Start ignoring BootLintBear --> 
 
    <li><button id="install-susper">Install susper</button></li> 
 
    <li>Mark the checkbox to set Susper as your default search engine</li> 
 
    <li>Start searching!</li> 
 
    </ol> 
 
    <button id="cancel-installation">Cancel</button> 
 
</div> 
 
<!-- Stop ignoring BootLintBear --> 
 
<div id="search-bar"> 
 
    <app-search-bar></app-search-bar> 
 
</div>

Answer 1

スクリプトコードであなたの最初の行をコメントアウトしてください。スクリプトを次のように置き換えてください：

$(document).ready(function() { 
     //var isFirefox = typeof InstallTrigger !== 'undefined'; 

     //if (isFirefox === false) { 
     // $("#set-susper-default").remove(); 
     // $(".input-group-btn").addClass("align-search-btn"); 
     // $("#navbar-search").addClass("align-navsearch-btn"); 
     //} 

     if (window.external && window.external.IsSearchProviderInstalled) { 
      var isInstalled = window.external.IsSearchProviderInstalled("http://susper.com"); 

      if (!isInstalled) { 
       $("#set-susper-default").show(); 
      } 
     } 

     $("#install-susper").on("click", function() { 
      window.external.AddSearchProvider("http://susper.com /susper.xml"); 
     }); 

     $("#cancel-installation").on("click", function() { 
      $("#set-susper-default").remove(); 
     }); 
    });