如何调整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扩展程序及其元素？

回答

相关问题