Wie ändere ich die Chrome-Erweiterung und ihre Elemente?

-1

Ich arbeite an einem einfachen Chrome Extension. Ich entschied mich, Bootstrap zu verwenden, um mir mit Design zu helfen, und alles scheint zu arbeiten, aber das Popup-Fenster ist sehr hoch und dünn und alle Elemente innen (Knöpfe, Formen ...) sind zu riesig. Es macht Sinn, weil die Elemente ihre normale Größe haben, aber im Plugin sollten sie kleiner sein.Wie ändere ich die Chrome-Erweiterung und ihre Elemente?

Zur Veranschaulichung:

Ich habe versucht, diesen Code in popup.js zu setzen:

$(document).ready(function() { 
    $('body').height(280); 
    $('html').height(280); 
});

Wie Sie sehen können, sollte der Popup breiter und weniger kleiner.

popup.html

<!doctype html> 
<html> 
<head> 
    <title>Getting Started Extension's Popup</title> 
    <style> 
     body { 
      font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif; 
      font-size: 100%; 
     } 

     #status { 
      /* avoid an excessively wide status text */ 
      white-space: pre; 
      text-overflow: ellipsis; 
      overflow: hidden; 
      max-width: 400px; 
     } 
    </style> 


    <!-- 
     - JavaScript and HTML must be in separate files: see our Content Security 
     - Policy documentation[1] for details and explanation. 
     - 
     - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy 
    --> 

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script> 
    <script src="bootstrap/bootstrap.min.js"></script> 
    <script src="bootstrap/html5shiv.js"></script> 
    <script src="bootstrap/respond.min.js"></script> 
    <script src="bootstrap/usebootstrap.js"></script> 

    <script src="popup.js"></script> 
    <script src="productspy.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 

    <link href="theme/bootstrap.css" rel="stylesheet"> 
    <link href="theme/usebootstrap.css" rel="stylesheet"> 
</head> 
<body> 
<h1>Product Spy Client</h1> 
<h2>Please login:</h2> 
<form class="form-signin"> 
    <h2 class="form-signin-heading">Please sign in</h2> 
    <label for="inputEmail" class="sr-only">Email address</label> 
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""> 
    <label for="inputPassword" class="sr-only">Password</label> 
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required=""> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" value="remember-me"> Remember me 
     </label> 
    </div> 
    <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button> 
</form> 
<button id="check-conn-button-id" class="btn-primary">Check Connection</button> 
</body> 
</html>

Wie das Fenster des Popup und kleinere Elemente, um die Größe, so würde jeder Knopf und alles kleiner sein? Ist es möglich?

Quelle

2016-09-26 Milano Slesarik

Es gibt keine spezielle Magie im Falle von Popups. Klicken Sie mit der rechten Maustaste auf das Popup und verwenden Sie den Element-Inspektor, um zu sehen, welche Regeln für 'html'- und' body'-Elemente tatsächlich aktiv sind. – wOxxOm

Schnelle Frage: Haben Sie die erforderlichen Schritte zum Laden von Remote-Skripten durchgeführt? Und warum laden Sie jQuery remote? Es ist wahrscheinlich, dass dein Code nie ausgeführt wurde, da jQuery nicht geladen wurde - hast du [versucht zu debuggen] (https://developer.chrome.com/extensions/tut_debugging)? – Xan

In Ihrem CSS, in PopUp.html.

body { 
    max-height:280px; 
    width:300px; 
    overflow:auto; /* I suppose you want scroll if something happened*/ 
}

Quelle

2016-09-26 22:48:29

Wie ändere ich die Chrome-Erweiterung und ihre Elemente?

Antwort

Verwandte Themen