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

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