web-dev-qa-db-fra.com

Obtenez l'URL et enregistrez-la | Chrome

Fondamentalement, sur ma fenêtre (lorsque vous cliquez sur l'icône), il devrait s'ouvrir et afficher l'URL de l'onglet et à côté, je veux qu'il dise "Enregistrer", il l'enregistrera dans le localStorage et sera affiché ci-dessous dans le fichier enregistré zone de liens.

Comme ça:

alt text

Quelque chose comme des signets :)

htmlgoogle-chromegoogle-chrome-extensionlocal-storage
31
Jamie

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

La première étape consiste maintenant à 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 se ferme (se ferme). Ce que j'essaie de dire, si vous avez beaucoup de calculs et que vous voulez que cela se produise en arrière-plan et se produise même si le popup est fermé, déplacez tout vers page d'arrière-plan . 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 auriez besoin d'obtenir l'URL de l'onglet actuel, pour ce faire, l'API Tab a une fonction " getSelected " qui vous permet d'obtenir le objet Tab 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 pour protéger ses utilisateurs contre les attaques JavaScript:

Scripts en ligne et gestionnaires d'événements interdits

Maintenant, cela vous permettra d'afficher l'URL dans la fenêtre contextuelle de la page actuelle en tant qu'action de navigateur. Votre prochaine étape consiste à utiliser des fonctionnalités HTML5 simples telles que localStorage ou Webdatabase (à mon avis, ce sera mieux). Pour stocker les pages enregistrées dans, vous pouvez les rendre sur la page de liens enregistrés comme je l'ai fait pour le lien actuel.

Bonne chance!

49
Mohamed Mansour

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

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

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

Cela nécessite toujours que vous demandiez l'accès à chrome.tabs API 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 t'aides!

13
thauburger

pour obtenir l'url actuelle, vous devez obtenir l'onglet actuel, puis 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 tab, 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 l'autorisation "tabs" dans le manifeste de votre extension pour utiliser l'API tabs. Par exemple

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