chrome_extension [Broco de notas]

- Extensoes para Google Chrome
Discussão

Extensoes para Google Chrome

Check my extension for Akamai Diagnosis and Purge out at : http://app.maat.com.br/akamai#akamai_diagnose_tool_for_google_chrome

Exemplos:

http://code.google.com/chrome/extensions/samples.html

Dev Guide:

http://code.google.com/chrome/extensions/devguide.html

Update extensions automatically:

http://code.google.com/chrome/extensions/autoupdate.html

Referencia de JavaScript:

https://developer.mozilla.org/en/JavaScript/Reference ou http://www.w3schools.com/jsref/dom_obj_body.asp

XMLHttpRequests:

https://developer.mozilla.org/en/using_xmlhttprequest

Outras APIs - Especialmente HTML5 :

http://code.google.com/chrome/extensions/api_other.html

APIs Experimentais :

http://code.google.com/chrome/extensions/experimental.html

Overview

O que eh uma extensao, quais seus componentes, arquitetura, comunicacao etc:

http://code.google.com/chrome/extensions/overview.html

Passos iniciais

Primeiro, setar as permissoes necessarias no Manifest.json. Ex:

{
  "name": "My extension",
  ...
  "permissions": [
    "notifications"
  ],
  ...
}

Exemplo de codigo :

// Create a simple text notification:
var notification = webkitNotifications.createNotification(
  '48.png',  // icon url - can be relative
  'Hello!',  // notification title
  'Lorem ipsum...'  // notification body text
);
 
// Or create an HTML notification:
var notification = webkitNotifications.createHTMLNotification(
  'notification.html'  // html url - can be relative
);
 
// Then show the notification.
notification.show();

Options Page

Definir seu uso no manifest.json :

..
"options_page": "options.html",
..

“Remember that localStorage can only store strings, which means you have to store your objects in a JSON-string with JSON.stringify(object)” - source : http://thecodingbug.com/blog/2010/3/7/creating-a-to-do-extension-for-chrome-part-1/

Implementacao de exemplo:

<html>
<head><title>MaaT options</title>
<style>
body {  font-family: verdana;  font-size: 10px;  color: black;padding: 5px;  margin: 1px;  min-width: 320px;  overflow: hidden;  background-image: -webkit-gradient(radial, 50% 10%, 20, 50% 10%, 300, from(#9FFFFF), to(#FFF));
}
td {  font-family: verdana;  font-size: 8px;  color: black; white-space: nowrap;}
.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}
a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
 
a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}
 
}
</style>
 
</head>
<script type="text/javascript">
 
function isEmpty( inputStr ) { return !(inputStr&&inputStr.length) }
 
// Saves options to localStorage.
function save_options() {
	language_radio=document.forms['myform'].elements['language'];
	for (i=0;i<language_radio.length;i++){
	     if (language_radio[i].checked){
		  localStorage["language"] = language_radio[i].value;
	     }
    }
 
	var status = document.getElementById("status");
 
	if (document.getElementById("has_account").checked){
		if (isEmpty(document.getElementById("username").value)|| isEmpty(document.getElementById("password").value)) {
			status.innerHTML = "Please fill all the fields!";
			return false;
		}
		localStorage["username"] = document.getElementById("username").value;
		localStorage["password"] = document.getElementById("password").value;
	}
	localStorage["has_account"] = document.getElementById("has_account").checked
 
  // Update status 
  status.innerHTML = "<span style='font-color:blue'> Options Saved.</span>";
  setTimeout(function() {
    status.innerHTML = "";
  }, 1500);
  return false;
}
 
// Restores select box state to saved value from localStorage.
function restore_options() {
  var has_account = localStorage["has_account"];
  var username = localStorage["username"];
  var password = localStorage["password"];
  var language = localStorage["language"];
 
  language_radio=document.forms['myform'].elements['language'];
  for (i=0;i<language_radio.length;i++){
	  if (language_radio[i].value==language){
		  language_radio[i].checked= true;
	}
  }
 
  if (has_account =="false") {
		document.getElementById("username").disabled = true;
		document.getElementById("password").disabled = true;
    return;
  }
  document.getElementById("has_account").checked = has_account;
  document.getElementById("username").value = username;
  document.getElementById("password").value = password;
 
}
 
function toggleAccount(){
	//account_box = document.getElementById("account_box");
	//account_box.style.backgroundColor="#FFFFFF";
	if(document.getElementById("has_account").checked){
		document.getElementById("username").disabled = false;
		document.getElementById("password").disabled = false;
	}
	else
	{
		document.getElementById("username").disabled = true;
		document.getElementById("password").disabled = true;
		document.getElementById("username").value = "";
		document.getElementById("password").value = "";
 
	}
}
</script>
 
<body onload="restore_options()">
<form name="myform" onsubmit="return false;">
<img style="width: 151px; height: 44px;" alt="Mylogo" src="maat.gif"><br/><br/><br/>
 
<h1 style="text-align:center;margin:0px">Options</h1>
Language :
<br/><input type="radio" id="language_English" name="language" value="English" > English </input>
<br/><input type="radio" id="language_Portuguese" name="language" value="Portuguese"> Portuguese </input>
<br/><input type="radio" id="language_Spanish" name="language" value="Spanish"> Spanish </input>
<br/><br/><br/>
<div id="account_box">
<div style="position:relative;top:-10px;background:#FFFFFF;width:77%;margin:0px 0px 0px 15px"><input type="checkbox" id="has_account" value="1" onclick="toggleAccount();">I have an MaaT Sys account :</input></div>
 User: <br/>
<input id="username"/>
 
<br/>
 
 Password: <br/>
<input id="password" type="password"/>
</div>
<br/>
<br/>
<button onclick="save_options();">Save</button> <span id="status"></span>
 
 
</form>
<br/>
<br/>
<img style="width: 65px; height: 25px;float:right" alt="Logo" src="Other.gif">
</body>
</html>

Extension's pages

Content Scripts

http://code.google.com/chrome/extensions/content_scripts.html Codigo javascript que roda no contexto das paginas web que estao sendo visitadas pelo Browser. Atraves de Document Object Model (DOM), esses scripts podem interagir com as paginas sendo acessadas, lendo informacoes sobre elas ou mesmo alterando-as. Mas esses scripts nao podem usar diretamente as API chrome.* (a nao ser as do http://code.google.com/chrome/extensions/extension.html), variaveis ou funcoes definidas por Extension's pages, paginas sendo navegadas ou outros Content Scripts ou mesmo fazer cross-site XMLHttpRequests. Essas limitacoes sao normalmente contornadas atraves do uso de troca de mensagens com as paginas da extensao (http://code.google.com/chrome/extensions/messaging.html) ou utilizando objetos DOM compartilhados (http://code.google.com/chrome/extensions/content_scripts.html#host-page-communication))

Page Action

//React when a page action's icon is clicked.
    chrome.pageAction.onClicked.addListener(function(tab)

Browser Action

//React when a browser action's icon is clicked.
    chrome.browserAction.onClicked.addListener(function(tab)

Internationalization

Distribuindo as extensoes

Empacote sua extensao usando a propria pagina de extensoes do Chrome: - Vá ao menu Tools/Extensios. - Ative o “Developer mode”, clicando no ”+”. - Clique em “pack extension” . Mais detalhes em : http://code.google.com/chrome/extensions/packaging.html

Para distribuir sua extensao, use o Developer Dashboard (https://chrome.google.com/webstore/developer/dashboard). Precisa pagar $5.

Discussão

Nome completo:

E-mail:

Website:

Insira seu comentário. Sintaxe de wiki é permitida:

Please fill all the letters into the box to prove you're human.

Acompanhar comentários