moonorongo
11/18/2016 - 2:42 PM

[Chrome extensions] Creacion Extension Chrome - simple, sin acceder a tabs ni nada... #js #chrome #extensions

[Chrome extensions] Creacion Extension Chrome - simple, sin acceder a tabs ni nada... #js #chrome #extensions

index.html
content_copyfile_download
<!doctype html>
<html>
    <head>
        <title>Hello jQuery</title>
        <link rel="stylesheet" type="text/css" href="lib/semantic-ui/semantic.css">
        <link rel="stylesheet" type="text/css" href="lib/styles.css">
        
        <style>
          body {
            font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
            font-size: 12px;
            min-width: 800px;
            height: auto;
          }
        </style>

        <script src="lib/jquery.js"></script>
        <script src="lib/semantic-ui/semantic.js"></script>
        <script src="index.js"></script>
    </head>
    
    <body>
        <a id="btnPageSpeed" href="#" target="_blank">Lala</a>

        <div class="ui tabular menu">
            <div class="item active" data-tab="tab-name">Tab Name</div>
            <div class="item" data-tab="tab-name2">Tab Name 2</div>
        </div>
        <div class="ui tab active" data-tab="tab-name">
            <h4 class="ui header">Using Build Tools</h4><i class="icon code"></i><a class="anchor" id="using-build-tools"></a>

            <p>Semantic UI packaged Gulp build tools so your project can preserve its <a href="/usage/theming.html">own theme changes</a>.</p>
            <p>The easiest way to install Semantic UI is our NPM package which contains special install scripts to make setup interactive and updates seamless.</p>

            <p>For installing with specific integrations like, Ember, React, or Meteor, see our <a href="/introduction/integrations.html">integration guide</a></p>
            <p>For integrating Semantic UI tasks into your own build tools, or using a CDN see our <a href="/introduction/advanced-usage.html">recipes</a> section.</p>
        </div>
        <div class="ui tab" data-tab="tab-name2">
            <h4 class="ui header">Reduced Memory Leaks</h4>
        </div>        
        
    </body>
</html>
manifest.json
content_copyfile_download
{
  "manifest_version": 2,

  "name": "Hello JQuery",
  "description": "Prueba con JQuery",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon5.png",
    "default_popup": "index.html"
  }
}
index.js
content_copyfile_download
$(document).ready(function(){
    $('#btnPageSpeed')
        .html('Click here to redirect')
        .prop({href : 'http://youtube.com'});
        
    $('.tabular.menu .item').tab();
});