Extension Chrome : Le content script est appelé avant le chargement de la page

[narmataru]

Bonjour,

J'essaye de créer ma première extension Google Chrome. Son objectif est de récupérer la liste des chanson de mes playlists deezer.

Voici mon manifest :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
{
		"name": "Deezer Playlist Exporter",
		"version": "1.0",
		"description": "Export your deezer playlists",
		"background_page": "background.html", // The page containig js to show/hide the page_action, and get the playlists structure from the content_script
		"content_scripts": [ // Parse the tab document and create playlist structure
		  { "matches": ["http://www.deezer.com/*"], "js": ["deezer_content_script.js"] }
		],
		"permissions" : [
			"tabs"
		],
		"page_action": {
			"default_icon": "icon.png", // optional
			"default_name": "Export the deezer playlist",    // optional; shown in tooltip
			"default_popup": "playlist.html"    // The popup shown when the user click ont the icon. Display the playlist structure.
		}
}

J'ai donc un fichier background qui est appeler au chargement de l'extension et qui ajoute des listeners sur les tabs.

Code :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<script>
var playlistsTab = new Array(); // One play list by tabId
var selectedTabId = null;
var selectedPlaylist = null;
 
var playlistsTitle = new Array();
var selected
 
function updatePlaylist(tabId) {
  chrome.tabs.sendRequest(tabId, {}, function(playlist) {
    playlistsTab[tabId] = playlist;
    if (!playlist) {
      chrome.pageAction.hide(tabId);
    } else {
      chrome.pageAction.show(tabId);
      if (selectedId == tabId) {
        updateSelected(tabId);
      }
    }
  });
}
 
function updateSelected(tabId) {
  selectedPlaylist = playlistsTab[tabId];
  if (selectedAddress)
    chrome.pageAction.setTitle({tabId:tabId, title:selectedPlaylist});
}
 
 
// Called when the url of a tab changes.
function checkForValidUrl(tab) {
	var ind = tab.url.indexOf('http://www.deezer.com/');
	var show = false;
	if (ind == 0) {
		show = true;
	}
	return show;
}
 
function updatePlaylist(tab){
	var isValidUrl = checkForValidUrl(tab);
	chrome.pageAction.hide(tab.id);
	if(isValidUrl){
		chrome.tabs.sendRequest(tab.id, {}, function(playlist) {
			playlistsTab[tab.id] = playlist;
			if(playlist) {
				chrome.pageAction.show(tab.id);
				if (selectedId == tabId) {
					updateSelected(tab.id);
				}
			}
		});
	}
}
 
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
		if (changeInfo.status == "complete") {
		//	alert("status  => "+changeInfo.status);
			updatePlaylist(tab)
		}
	});
 
chrome.tabs.onSelectionChanged.addListener(function(tabId, info) {
	selectedId = tabId;
	updateSelected(tabId);
});
 
// Ensure the current selected tab is set up.
chrome.tabs.getSelected(null, function(tab) {
	updatePlaylist(tab);
});
</script>

La fonction updatePlaylist(...) permet de lancer un évenement vers deeezer_content_script.js pour récupérer la liste des chansons. Cette évènement est lancé depuis chrome.tabs.onUpdated.addListener ligne 84 et je m'assure que la page est chargée grace au changeInfo.status == "complete".

Le fichier deeezer_content_script.js est le seul capable de lire le contenu de la page grace au DOM.

Code :

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
33
 
// The background page is asking us to find an address on the page.
if (window == top) {
  chrome.extension.onRequest.addListener(function(req, sender, sendResponse) {
    sendResponse(findPlaylist());
  });
}
 
var getLoadedPlaylistTitle = function(){
	var title = document.getElementById('naboo_playlist_title');
	if(title){
		title = title.innerHTML;
	}
	alert('title : '+title);
	return title;
}
 
// Search the playlist and return an array of  playlist structure.
// Return null if none is found.
var findPlaylist = function() {
	var title = getLoadedPlaylistTitle();
	var dlElements = document.getElementsByTagName("dl");
	var htmlTracks = new Array();
	var j=0;
	for(var i=0; i<dlElements.length; i++){
		if(dlElements[i].id.indexOf('naboo_datagrid_track') == 0){
			htmlTracks[j] = dlElements[i];
			j++;
		}
	}
	alert('Nb tracks : '+htmlTracks.length);
	return "The play list 22!";
}

Ca fonctionne cependant, l'alert ligne 136 à toujours une page de ratard. Si j'ouvre une playliste, l'alert me donnera le nombre de chansons de la liste précédente ! Or je récupère ce nombre en lisant document. C'est comme si le test que je faisais pour m'assurer que la page est bien terminée de chargé dans le background, ne servait à rien.

Quelqu'un verrait une erreur ?

Merci

[narmataru]

Je me demande si ce n'est pas à cause d'appels ajax.

La nouvelle page serait chargé, mon extension activée. Le script content.js parcourerait le contenu, mais la liste des titres ne seraient pas encore mise à jour. Puis un appel ajax mettrait la liste à jour...

Comment pourrais-je attendre le chargement des contenu chargés an ajax ?