Develop Chrome Extensions IV

Some days ago i wrote how test your extensions.
Well I was planned to explain how to autoupdating your extension, so i have been trying to do it and I can not get it.
The problem has been very simple, has been imposible to get a hosting where locate a crx file to allow google chrome download the updated file.

Well, there is a solution for that. If you want your users get automatically your updates, you can upload the extension to the Chrome Market.
If you decide that you must to consider two important things

1. first time to upload something you must pay 3,85€ or 5$
2. you must to start to publish your extension as test.

The second one is very important.

Let´s see: if you upload an bad product and you recibe a poor puntation, in the future you will be curtailed to be a good creator.

I recomend you to publish your extension when you will be  sure that it is a good product.

Developping chrome extensions III

You can feel reading this text that i am explain nothing about code. Ok it is right. I dont mind to explain developping techniques, i want to tell you steeps to get an extensin from the begin to the market.

Lets see... now you have a extension which you can add a button to a web, por example. Now its time to share it and start ti test for bugs. If you try to do it alone its imposible.
The best way is to tell it to your friends in G+ for example. Firstly you must to upload your crx file to Gdrive and share with your friends the link to this file.

How can i get a crx file?. the answer its very Easy

You must access to the extension properties page and you must check  the developper mode. Now appears new buttons. One of them is "package an extension". If you click here  you will be asked about the folder extension, and about a private key. If it is the first time, you must to leave blank the private key in other case you must to link to file generated first time, if you want to Chrome detects this as extension update.

After that, you will get a crx file.  Now you can host this crx file where you want and share the link with your friends.

In the next chapter will learn to get automatically updates.

Developping chrome extensions II

Now you are having a folder with all your files.

You are ready to test your extension.

As you can see in the upper picture, when you check developper mode appears different buttons. If you click in "load uncompressed extension" you will be asked about the location of the folder contains all files.

Once do it, will appears as a new extension in your panel and you will be able to test and debug it.

As a very light gide lines about your first extension... for example have you think about change the styles of a page getting something that you prefer instead the original? For example have you think about to get disapear the chat in Gmail?

Please check web reference about Jquery

PicasaWeb for Google+ 1.0.1

First version Here:

http://juanantoniocarrillonavarro.blogspot.com.es/p/picasaweb-for-google.html

Developping chrome extensions

As you can imagine I am not an advanced developer of extensions for Google Chrome but I would like to share with you what I have learned to develop my first extension.

4 days ago I had no idea about how it developed an extension and that only need 3 or 4 files, possibly some more if you want to develop something more advanced.

The first and most important is "manifest.json"

{     "name": "Title",     "version": "1.0",     "background_page": "background.html",     "options_page": "opciones.html",     "description": "Aprendiendo a usar archivos de configuracion",     "browser_action": {"default_icon": "icono.png"},     "content_scripts": [{ "matches": ["http://*/*"], "js": ["jquery.min.js"] }],     "permissions": ["tabs", "http://*/", "https://plus.google.com/" ] }

This file describes the overall configuration of the extension.
The field "background_page" is one that contains the name of the file that has the code that runs our extension.
The field "Browser_action" accepts various parameters, in this case we are defining the icon that will have our extension in the browser interface.
In "Content_scripts", as it somehow define what files we want to have available in our environment (jquery.min.js, in this case) and that websites (entire site).
Finally we have the "Permissions". In this field we will enable our extension to interact with web elements and there indicate.


The second file is background.html

<script> chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {     if(tab.url.indexOf("plus.google") != -1 && tab.url.indexOf("photos") != -1 ) {         if (changeInfo.status=="complete")             {             chrome.tabs.executeScript(tab.id, {'file':'jquery.min.js'});             chrome.tabs.executeScript(tab.id, {'file':'inyeccion.js'});             }     } }); </script>

This file is very simple.
Here you are going to define who will do your extension.
For example for you to understand quickly. , I am detecting when a tab is updated and detect when loading is complete.

If the URL of the website in which contains the words "plus.google" and "photos" then injected into the web the "JS" file that i have defined in my Manifest.json file and "inyeccion.js" that implements the various actions that get the purpose of the extension.

Of course this post is not intended to give an extension done. My purpose is to explain how it works in a way as simple as possible. Official help of Google is very useful, I recommend it

Picasaweb for Google+ 1.0

This project is my first one personal project. I hope not the last.
I have decide to design an extension for Google Chrome to rescue an easy access to the public Picasaweb Gallery for each user.

Few weeks ago when you try to navigate to a public picasa gallery there was no problem, It wasn´t easy but you can see it. Now it´s imposible. Actually is not imposible but you must to know some tips to get access.

With this extension i want to get access everybody to the full functionality of picasaweb from Google+.

Next days i will public the extension. Now i am testing the first version.