如何調整Chrome擴展程序及其元素？

-1

我正在處理簡單的Chrome擴展程序。我決定使用Bootstrap來幫助我設計和一切似乎工作，但彈出式窗口是非常高和薄，裏面的所有元素（按鈕，窗體...）太大了。這是有道理的，因爲元素是它們的規則大小，但是在插件中，它們應該更小。如何調整Chrome擴展程序及其元素？

爲了說明：

我試圖把這個代碼放到popup.js：

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

正如你所看到的，在彈出的應該更寬，少較小。

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>

如何調整彈出的小元素的窗口，使每一個按鈕，一切都將是小？可能嗎？

來源

2016-09-26 Milano Slesarik

彈出窗口沒有特殊的魔法。右鍵單擊彈出框並使用元素檢查器查看哪些規則實際上對'html'和'body'元素有效。 – wOxxOm

快速問題：您是否執行了允許加載遠程腳本的必要步驟？爲什麼_遠程加載jQuery？這可能是你的代碼從未運行過，因爲jQuery沒有加載 - 你是否[嘗試調試]（https://developer.chrome.com/extensions/tut_debugging）？ – Xan

在你的CSS中，在popup.html中。

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

來源

2016-09-26 22:48:29

如何調整Chrome擴展程序及其元素？

回答

相關問題