32 votes

Obtenir l'URL et l'enregistrer | Extension Chrome

En gros, dans ma fenêtre (lorsque vous cliquez sur l'icône), elle doit s'ouvrir et afficher l'URL de l'onglet et à côté, je veux qu'il soit indiqué "Enregistrer", ce qui permettra de l'enregistrer dans le LocalStorage et de l'afficher en dessous dans la zone des liens enregistrés.

Comme ça :

alt text

Quelque chose comme des signets :)

1 votes

Note : Toutes les réponses ici suggèrent d'utiliser chrome.tabs.getSelected . Cette méthode de l'API a cependant été dépréciée, vous devez utiliser chrome.tabs.query à la place - Voir Comment obtenir l'URL de l'onglet actuellement ouvert dans la fenêtre contextuelle de mon action de page ?

51voto

Mohamed Mansour Points 18019

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

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

Dans votre popup.html, vous devez récupérer l'URL de l'onglet actuel. Pour ce faire, l'API d'onglet dispose d'un " getSelected "qui vous permet d'obtenir la fonction Objet de l'onglet pour l'onglet sélectionné.

Donc quelque chose comme ça :

popup.html

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

popup.js

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

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

Les scripts en ligne et les gestionnaires d'événements ne sont pas autorisés.

Cela vous permettra d'afficher l'URL dans la fenêtre contextuelle de la page actuelle en tant qu'action du navigateur. Votre prochaine étape est d'utiliser des fonctionnalités HTML5 simples comme localStorage, ou Webdatabase (à mon avis ce sera mieux). Pour stocker les pages sauvegardées, vous pouvez ensuite les rendre sur la page savedLinks comme je l'ai fait pour le currentLink.

Bonne chance !

0 votes

Un code très utile pour commencer, je vais faire le stockage, merci :)

0 votes

Jetez un coup d'œil à HTML5 webdatabase (il est mieux pour votre scénario)

4 votes

Le script ci-dessus ne fonctionne que si vous avez la bonne permission définie dans le manifeste : "permissions" : [ "tabs" ]

14voto

thauburger Points 619

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

El chrome.tabs.getSelected() est désormais obsolète. La méthode recommandée pour obtenir l'URL de l'onglet courant est d'utiliser chrome.tabs.query() :

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

Pour ce faire, vous devez toujours demander l'accès au chrome.tabs dans votre manifeste d'extension :

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

Vous pouvez en savoir plus sur la dépréciation ici : chrome.tabs.getSelected()

J'espère que cela vous aidera !

10voto

phoenix24 Points 993

Pour obtenir l'url courante, vous devez obtenir l'onglet courant et ensuite extraire tous les paramètres.

pour obtenir l'utilisation actuelle de l'onglet, chrome.tabs.getSelected() . Ensuite, pour récupérer les paramètres de l'objet de l'onglet, référez-vous à tabs api

votre 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 devrez également déclarer la permission "tabs" dans le manifeste de votre extension pour utiliser l'API des onglets. Par exemple

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X