Chrome-Extension-Twitter-Bootstrap-3-Template, 使用 Twitter Bootstrap 3制作 Google Chrome 扩展的模板

分享于 

4分钟阅读

GitHub

  繁體 雙語
A simple tool for creating splunk queries and turning them into HTTP requests
  • 源代码名称:Chrome-Extension-Twitter-Bootstrap-3-Template
  • 源代码网址:http://www.github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template
  • Chrome-Extension-Twitter-Bootstrap-3-Template源代码文档
  • Chrome-Extension-Twitter-Bootstrap-3-Template源代码下载
  • Git URL:
    git://www.github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template.git
    Git Clone代码到本地:
    git clone http://www.github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Chrome 扩展 Twitter Bootstrap 3模板

    使用 Twitter Bootstrap 3制作 Google Chrome 扩展的模板。

    Screenshot

    跳转到节

    正在启动

    这个包已经使你能够快速启动并运行一个新的Google Chrome 扩展。 这里软件包的基本结构如下:

    
    - css/
    
    
     -- bootstrap.min (Edited, please see"important notes")
    
    
     -- custom.css (Contains small style tweaks, edit this file at your will)
    
    
    - fonts/
    
    
     -- glyphicons-halflings-regular.eot
    
    
     -- glyphicons-halflings-regular.svg
    
    
     -- glyphicons-halflings-regular (TrueType font file)
    
    
     -- glyphicons-halflings-regular.woff
    
    
    - img/
    
    
     -- icon16.png
    
    
     -- icon48.png
    
    
     -- icon128.png
    
    
     --- Please note, this is just a filler image for your extension.
    
    
    - js/
    
    
     -- bootstrap.min
    
    
     -- jquery-2.0.3.min
    
    
    - manifest.json
    
    
    - popup.html
    
    
    - README.md
    
    
    
    

    安装

    • 请克隆这里存储库或者下载为ZIP文件。
    • 将内容提取到你首选的工作目录中。
    • 打开 Google Chrome 浏览器。
    • 在地址栏中输入 chrome://extensions/
    • 确保"开发人员模式"在右上角已经被标记/启用。
    • 点击"加载解压的扩展。"。
    • 导航到你提取的目录,然后单击"行"。
    • 你的基本扩展模板现在应该位于你的地址栏旁边,显示 Google Chrome logo。

    重要说明

    请注意,Bootstrap 3 CSS文件已经被修改为禁用 Bootstrap 3提供的标准响应功能。 由于扩展的最大宽度可以为 800px ( 不溢出),当扩展名为 below 769时,内容和导航栏将缩小为移动格式。 这些更改禁用了这些功能,允许你的扩展能够正常工作,无论你希望它。

    请访问:

    用法

    这里软件包是独立的如果你想了解更多关于扩展创建的信息,请访问 Google Developer文档:

    http://developer.chrome.com/extensions/getstarted.html

    要编辑的文件

    你需要编辑的主要文件包括:

    manifest.json

    • 这包含你的所有扩展信息。
    • 作为示例,已经添加存储权限。
    • 这个扩展的默认弹出窗口称为 popup.html
    • Google Analytics 跟踪需求也被添加。

    popup.html

    • 包含基本的HTML样板,在你的遗嘱中编辑。
    • 启用了标准( 非响应) 导航栏。
    • 主要内容区域被包装为 inside section

    css/自定义。css

    • 包含延伸高度和宽度。
    • 一旦扩展破坏了高度 overflow,就会添加一个样式化的CSS滚动条。
    • 样式调整也可以用于处理滚动条。

    ext  BOO  TEMP  引导  template  Bootstrap  
    相关文章