https://github.com/stylesuxx/google-chrome-extension-template

Template for a Google Chrome Extension
https://github.com/stylesuxx/google-chrome-extension-template

Last synced: about 1 month ago
JSON representation

Template for a Google Chrome Extension

• Host: GitHub
• URL: https://github.com/stylesuxx/google-chrome-extension-template
• Owner: stylesuxx
• Created: 2013-10-04T22:39:06.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2013-10-05T19:45:21.000Z (about 11 years ago)
• Last Synced: 2023-03-13T08:15:45.679Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 262 KB
• Stars: 17
• Watchers: 7
• Forks: 17
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Google Chrome: extension template with jQuery and bootstrap

This is a google chrome extension template including jQuery, bootstrap and a settings mechanism for your convencience.

1. ##### Customizing title and description

   In manifest.json you can change the information about your extension. The fields you want to change are:

   * name

   * description

   * default_title

2. ##### Customizing the Icon

   Just swap images/icon.png with the icon you want to use for your project.  

3. ##### Customizing the permissions

   If you want to access url's from your extension do not forget to add them to permissions in manifest.json

4. ##### Customizing the Popup

   The apperance of the popup may be changed in html/popup.html

   For your convenience there are two tabs in place already:

   * #home: The tab with the main content

   * #settings: The settings tab

5. ##### Customizing the settings

   Settings are saved when clicked on the save button. When the cancel button is pressed, the settings are reset to the last saved values.

   In the settings tab you can add more settings. The following input elements are supported:

   * text

   * radio

   * checkbox

   * select

   

6. ##### Customizing the style

   Add your own styles to css/main.css

   Don't forget, bootstrap is in place: you might be able to achive good results by just setting the right classes ;-)

7. ##### Adding code

   Add your business logic to js/main.js

8. ##### Further Information

   For further information about usage of jQuery, bootstrap and google chrome extensions check the documentations:

   * [jQuery 1.12.2] (http://jquery.com)

   * [bootsrap 3.0.0] (http://getbootstrap.com)

   * [Google Chrome Extension Tutorial] (http://developer.chrome.com/extensions/getstarted.html)