2010-05-09 37 views
30

Básicamente en mi ventana (cuando haces clic en el ícono) se debe abrir y mostrar la URL de la pestaña y al lado Quiero que diga "Guardar", la guardará en localStorage y se mostrará a continuación en el área de enlaces guardados.Obtener URL y guardarlo | Extensión de Chrome

De esta manera:

alt text http://i42.tinypic.com/dma7x5.png

Algo así como marcadores :)

+1

Nota: Todas las respuestas aquí sugieren utilizar 'chrome.tabs.getSelected'. Sin embargo, este método API ha quedado en desuso, en su lugar debe usar 'chrome.tabs.query' - Ver [Cómo obtener la URL de la pestaña abierta actualmente en la ventana emergente de mi acción de página?] (Http://stackoverflow.com/questions/10413911/how-to-get-the-currently-opened-tabs-url-in-my-page-action-popup/10417327 # 10417327) –

Respuesta

48

Si desea hacer algo así, puede hacerlo fácilmente con la API de extensiones de Chrome. Las áreas a tener en cuenta son:

Ahora, el primer paso es crear el archivo de popup.html y recordar que es transitorio, es decir, que solo vive cuando hace clic en la acción del navegador, luego muere si sale (se cierra). Lo que estoy tratando de decir, si tiene muchos cálculos y desea que ocurra en segundo plano y que sucedan incluso si la ventana emergente está cerrada, mueva todo al background page. Y en su ventana emergente, puede acceder fácilmente a la página de fondo utilizando chrome.extension.getBackgroundPage()

Dentro de su popup.html, necesitaría obtener la URL de la pestaña actual, para hacerlo, la API de pestañas tiene una función "getSelected" que le permite obtener el Tab object para la pestaña seleccionada.

Así que algo como esto:

popup.html

<html> 
<body> 
<p id="currentLink">Loading ...</p> 
<hr /> 
<ul id="savedLinks"></ul> 
<script type="text/javascript" src="popup.js"></script> 
</body> 
</html> 

emergente.js

chrome.tabs.getSelected(null, function(tab) { 
    document.getElementById('currentLink').innerHTML = tab.url; 
}); 

La razón por la que no se puede colocar el código JavaScript en el archivo HTML es la limitación de Chrome para proteger a sus usuarios de los ataques en JavaScript:

secuencias de comandos en línea y controladores de eventos anulado

Ahora eso le permitirá mostrar la URL en la ventana emergente de la página actual como una acción del navegador. El siguiente paso es usar funciones HTML5 simples como localStorage o Webdatabase (en mi opinión, eso será mejor). Para almacenar las páginas guardadas en, entonces puedes renderizarlas en la página savedLinks igual que hice para el currentLink.

¡Buena suerte!

+0

Código muy útil para comenzar, haré el almacenamiento, gracias :) – Jamie

+0

Mire la base de datos web HTML5 (es mejor para su escenario) –

+4

La secuencia de comandos anterior solo funciona si tiene el permiso correcto establecido en el manifiesto: "permisos": [ "pestañas" ] – ina

10

Obtenga la dirección actual, que necesita para obtener la ficha actual y luego extraer todos los paramenters.

para obtener el uso de la pestaña actual, chrome.tabs.getSelected(). A continuación, para obtener los parámetros del objeto de ficha, consulte tabs api

el fragmento de código debería tener este aspecto,

chrome.tabs.getSelected(null, function(tab) { 
    //properties of tab object 
    tabId = tab.id; 
    tabUrl = tab.url; 

    //rest of the save functionality. 
}); 

también tendrá que declarar el permiso "pestañas" en el manifiesto de su extensión para usar las pestañas API. Por ejemplo

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

Quería actualizar esta respuesta, ya que la API ha cambiado.

El método chrome.tabs.getSelected() ahora está en desuso. La forma recomendada de obtener el URL de la ficha actual es utilizar chrome.tabs.query():

chrome.tabs.query({'active': true}, function (tabs) { 
    var url = tabs[0].url; 
}); 

Esto todavía requiere que se solicita el acceso a la API chrome.tabs en su extensión manifiesta:

"permissions": [ ... 
    "tabs" 
] 

Puede leer más acerca de la desaprobación aquí: chrome.tabs.getSelected()

Espero que esto ayude!

Cuestiones relacionadas