Discussion :

[ManusDei]

Bonjour, je cherche à développer une extension simple (dans un premier temps) en javascript pour navigateur.

Sur la page d'un compte twitter, je veux récupérer le nom du compte via le titre de l'onglet et ouvrir un nouvel onglet... avec la même adresse recomposée.
Sauf que je débute totalement en javascript et ça ne fonctionne pas, et je n'ai aucune idée de pourquoi.

Code background.js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
chrome.browserAction.onClicked.addListener(function() {
	chrome.tabs.query({
		currentWindow: true,
		active: true
	}, function(tab) {
		// recupère le titre de l'onglet 
		var titre = chrome.tabs.title(this);
		// récupère dans le titre la chaîne de caractère ID
		var twit_id = titre.search('@(\w+)'); 
		chrome.tabs.create({
			"url": "https://twitter.com/"+twit_id
		});
	});
});

Code manifest.json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
	"manifest_version": 2,
 
	"name": "TabCopy",
	"description": "ouvrir un nouvel onglet avec la même adresse",
	"version": "1.0",
	"background": {
		"scripts": ["background.js"]
	},
 
	"permissions": ["tabs"],
	"browser_action": {
		"default_icon": "icon.png",
		"default_title": "Go to Dev.Opera!"
	}
}

Est-ce que quelqu'un pourrait m'aider ? (le sujet est suffisamment nouveau pour que je ne sois même pas certain d'être dans le bon forum)

Edit : j'ai trouvé, je mettrais une réponse quand j'aurais fini de débugguer.

[ManusDei]

Donc, j'ai largement revu le code javascript.
Mon problème est qu'à l'heure actuelle, la première fois que je clique sur le bouton, la page s'ouvre mais twit_id vaut "null".
Si je rappuie sur le bouton, twit_id vaut l'URL, ce qui n'est pas bon non plus.
Donc j'ai deux questions, la première c'est pourquoi à la première execution twit_id vaut "null", et la deuxième c'est comment nettoyer ce qu'il y a dans la variable après utilisation pour que ça ne pollue pas de futures utilisations de l'extension ?

Merci
PS : par exemple sur la page d'arte, sur le premier clic ça m'ouvre une page vers "null", si je clique à nouveau en étant sur la page d'arte ça m'ouvre cette adresse https://twitter.com/https://twitter.com/ARTEfr

Code background.js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
currentWindowName = undefined;
twit_id = undefined;
const regex = /https?\:\/\/twitter\.com\/(.*)/g;
 
function getTabName(){
	chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
  	console.log(tabs[0]);
  	currentWindowName = tabs[0].url.toString();
 
	});
};
 
function createURL(param){
	// récupère dans le titre la chaîne de caractère ID
	twit_id = regex.exec(param); 
 
};	
 
function openFinalTab(){
		chrome.tabs.create({
			"url": "https://twitter.com/"+twit_id
	});
	delete twit_id;
};
 
chrome.browserAction.onClicked.addListener(function() {
		getTabName();
		createURL(currentWindowName);
		openFinalTab();
 
});

[ManusDei]

Bon, j'y arrive pas et je vois des tutos avec des infos contradictoires.
Est-ce que quelqu'un pourrait m'indiquer l'adresse d'un forum avec une section dédiée au développement d'extensions pour navigateur car j'arrive même pas à avoir le même bug de manière consistante ?

[Watilin]

Je vois deux problèmes, mais il y en a peut-être d’autres.

1. Ta regexp. C’est plusieurs problèmes en un seul :

• elle n’est pas ancrée au début de la chaîne : utilise ^ /^https?:\/\/.../
• le flag g fait que la regexp garde son lastIndex en mémoire et va finir par renvoyer null à des moments inattendus. Je t’encourage à consulter la doc de exec().
• les parenthèses capturantes, expliquées ici utilise (?: ... ).
• exec() renvoie un tableau, et dans ton script actuel il est ensuite converti implicitement en chaîne. Je suggère un console.log(twit_id) juste après le exec() pour voir ce qui se passe.

2. tabs.query() est asynchrone. Ta fonction de rappel qui donne une valeur à currentWindowName n’est appelée, au plus tôt, qu’une fois que ton gestionnaire de click est terminé. Donc, au moment où tu appelles createURL(currentWindowName), la variable n’a pas encore la valeur que tu veux.

En fait, évite de « partager » des variables entre plusieurs fonctions comme tu le fais. À la place, utilise les arguments de fonctions et les return.
Également, je ne vais pas rentrer dans un cours sur les fonctions asynchrones (il est trop tard ), mais il vaut mieux que tu maîtrises cette notion avant d’aller plus loin. Cherche des tutos. Et vu que l’API de Blink est à la traîne, utilise ce polyfill et tu pourras coder avec les instructions async / await qui rendent les choses plus simples.

[ManusDei]

Bonjour,

je n'ai pas eu le temps de modifier mon code mais avec quelques recherches c'est effectivement bien plus clair, merci. J'ignorais le côté asynchrone de Javascript
J'ai entre autre regardé ce tuto sur la programmation synchrone/asynchrone en javascript que j'ai trouvé assez clair.

Merci

[ManusDei]

Bon, j'ai pas beaucoup avancé.
Déjà vu que c'est un premier projet, utiliser un module tiers me paraît rajouter un niveau de complexité pas nécessaire (désolé, je sais que ça n'est pas très sympa de refuser la solution proposée).
Vu que l'extension que je veux faire à terme pourrait être installée à la main par quelques non-informaticiens ça me paraît même exclu d'utiliser la ligne de commande donc installer un module tiers avec npm c'est mort.

J'ai essayé d'inclure browser-polyfill.js directement dans mon extension mais j'ai une erreur quand je veux charger l'extension ("fonction anonyme" dans le fichier js).

Est-ce qu'il y a une bonne raison de ne pas utiliser then qui permet de chaîner plusieurs instruction en envoyant son résultat à la suivante ?
Car là je suis vraiment en train de faire des manipulations qui se suivent -récupérer une chaîne de caractère/extraire un morceau/construire une nouvelle chaîne- et ça me semblerait approprié.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const regex = /^https?\:\/\/twitter\.com\/(.*)/;
 
async function getTabName(){
	var tablink;
  chrome.tabs.query({'active': true, 'currentWindow': true},function(tab) {
    tablink = tab.url;
	});
	return await tablink;
};
 
async function createURL(param){
	// récupère dans le titre la chaîne de caractère ID
	 return regex.exec(param); 
 
};	
 
async function openFinalTab(twit_id){
		chrome.tabs.create({
			"url": "https://twitter.com/"+twit_id
	});
};
 
async function openTab(){
		var currentWindowName = await getTabName();
		var twit_id = await createURL(currentWindowName);
		await openFinalTab(twit_id);
 
};
chrome.browserAction.onClicked.addListener(function() {
	openTab(); 
});

La regex disparaîtra probablement à terme, remplacée par un split sur / quand j'arriverais à récupérer l'url correctement.

Merci

[Watilin]

Est-ce qu'il y a une bonne raison de ne pas utiliser then qui permet de chaîner plusieurs instruction en envoyant son résultat à la suivante ?

Dans l’absolu non, c’est juste que ça rend le codage plus confortable. Sinon tu dois imbriquer les callbacks et ça fait des pyramides d’indentation, le fameux callback hell.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
trucAsynchrone(function callback1(arg) {
  ...
  autreTrucAsynchrone(function callback2(autreArg) {
    ... (function ...(...) {
      ...
    });
    ...
  });
  ...
});

En fait, l’API de Blink (donc Chrome, Opera, etc.), qui ne sait pas renvoyer des instances de Promise, t’oblige à adopter la manière de coder avec les callbacks dans toute ton extension.
Dans ton code, lorsqu’un évènement clic est reçu, tu veux faire deux opérations asynchrones : tabs.query(), puis tabs.create(). Faisons les choses dans l’ordre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
chrome.browserAction.onClicked.addListener(function() {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tab) {
    ...
  });
});

Dans la fonction de rappel qui, pour l’instant, est vide (...), tu as accès à la valeur tab.url, à partir de laquelle tu extrais twit_id. Ça c’est synchrone, on ne change rien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    let twit_id = createURL(tab.url);
    ...

À la suite on appelle tabs.create, et comme tu n’as rien besoin de faire après, on a fini (mais il est aussi possible de passer une fonction de rappel à cet endroit).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    chrome.tabs.create({
      url: "https://twitter.com/" + twit_id
    });

Voilà ce que ça fait avec tous les morceaux ensemble :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const regex = /^https?\:\/\/twitter\.com\/(.*)/;
 
function createURL(param) {
  // récupère dans le titre la chaîne de caractère ID
   return regex.exec(param);
}
 
chrome.browserAction.onClicked.addListener(function () {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tab) {
    let twit_id = createURL(tab.url);
    chrome.tabs.create({
      url: "https://twitter.com/" + twit_id
    });
  });
});

La regex disparaîtra probablement à terme, remplacée par un split sur / quand j'arriverais à récupérer l'url correctement.

Sinon tu peux utiliser un objet URL.

Exemple :

Code console :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
>> let urlObj = new URL("https://twitter.com/bruderstein/status/647716091901419520")
 
>> urlObj.hostname
// "twitter.com"
 
>> urlObj.pathname
// "/bruderstein/status/647716091901419520"

[ManusDei]

Vu que les appels renvoient des Array il manquait l'appel à la bonne case du tableau, mais au moins je pense que je commence à comprendre comment ça marche.
C'est compliqué pour moi c'est super loin de ce dont j'ai l'habitude (l'embarqué).

Merci en tout cas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const regex = /^https?\:\/\/twitter\.com\/(.*)/;
 
function createURL(param) {
  // récupère dans le titre la chaîne de caractère ID
   return regex.exec(param);
}
 
chrome.browserAction.onClicked.addListener(function () {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tab) {
    let twit_id = createURL(tab[0].url);
    chrome.tabs.create({
      url: "https://twitter.com/" + twit_id[1]
    });
  });
});