30

Fondamentalement sur ma fenêtre (lorsque vous cliquez sur l'icône), il devrait ouvrir et afficher l'URL de l'onglet et à côté je veux qu'il dise "Enregistrer", il va l'enregistrer dans le localStorage, et d'être affiché ci-dessous dans la zone des liens enregistrés.Obtenez l'URL et enregistrez-le | Chrome Extension

Comme ceci:

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

Quelque chose comme les signets :)

+1

Remarque: Toutes les réponses suggèrent d'utiliser 'chrome.tabs.getSelected'. Cette méthode de l'API a été abandonnée, vous devez utiliser 'chrome.tabs.query' à la place - Voir [Comment faire pour obtenir l'URL de l'onglet actuellement ouvert dans le popup d'action de ma page?] (Http://stackoverflow.com/questions/10413911/comment-obtenir-le-actuellement-ouvert-onglets-url-dans-mon-page-action-popup/10417327 # 10417327) –

Répondre

48

Si vous voulez faire quelque chose comme ça, vous le faites facilement avec l'API des extensions Chrome. Les zones à surveiller sont:

Maintenant, la première étape consiste à créer votre fichier popup.html et rappelez-vous qu'il est transitoire, c'est-à-dire qu'il ne vit que lorsque vous cliquez sur l'action du navigateur, puis qu'il meurt s'il se ferme (se ferme). Ce que j'essaie de dire, si vous avez beaucoup de calcul et que vous voulez que cela se passe en arrière-plan et se produisent même si la fenêtre est fermée, déplacez tout à background page. Et dans votre popup, vous pouvez facilement accéder à la page d'arrière-plan en utilisant chrome.extension.getBackgroundPage()

Dans votre popup.html, vous devez obtenir l'URL de l'onglet actuel, pour ce faire, l'API Tab a une fonction "getSelected" qui vous permet d'obtenir le Tab object pour l'onglet sélectionné.

donc quelque chose comme ceci:

popup.html

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

pop-up.js

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

La raison pour laquelle vous ne pouvez pas placer le code JavaScript dans le fichier HTML est de la limitation de Chrome pour protéger ses utilisateurs d'attaques JavaScript:

scripts en ligne et les gestionnaires d'événements refusés

Maintenant, cela vous permettra d'afficher l'URL dans le menu contextuel de la page en cours en tant qu'action du navigateur. Votre prochaine étape consiste à utiliser des fonctionnalités HTML5 simples telles que localStorage ou Webdatabase (à mon avis, cela sera mieux). Pour stocker les pages enregistrées, vous pouvez les afficher sur la page SavedLinks de la même manière que pour le lien actuel.

Bonne chance!

+0

Code très utile pour commencer, je vais faire le stockage, merci :) – Jamie

+0

Jetez un oeil à HTML5 webdatabase (il est préférable pour votre scénario) –

+4

Le script ci-dessus ne fonctionne que si vous avez le bon droit défini dans le manifeste: "permissions": [ "tabs" ] – ina

10

pour obtenir l'URL actuelle, vous devez obtenir l'onglet en cours, puis extraire toutes les paramenters.

pour l'utilisation de l'onglet en cours, chrome.tabs.getSelected(). Ensuite, pour récupérer les paramètres de l'objet onglet, reportez-vous tabs api

extrait de code devrait ressembler à ceci,

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

    //rest of the save functionality. 
}); 

vous aurez également besoin de déclarer la « onglets » autorisation dans le manifeste de votre extension à utiliser l'API des onglets. Par exemple

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

Je voulais mettre à jour cette réponse, car l'API a changé.

La méthode chrome.tabs.getSelected() est maintenant obsolète. La méthode recommandée d'obtenir l'URL de l'onglet en cours est d'utiliser chrome.tabs.query():

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

Cela implique toujours que vous demandez l'accès à l'API chrome.tabs dans votre manifeste d'extension:

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

Vous pouvez en lire plus à propos de la dépréciation ici: chrome.tabs.getSelected()

Espérons que cela aide!

Questions connexes