Web : première extension Chrome

30 mai 2011
web chrome extension

J'avais besoin de pouvoir stocker toutes les pages ouvertes au sein de toutes les instances de Chrome ouvertes et j'ai donc pour cela réalisé ma première extension. Il faut savoir que je n'ai eu besoin que d'un fichier manifest.json décrivant l'extension et d'un fichier HTML classique avec le code Javascript qui va bien. Les deux fichiers sont à stocker dans un dossier à charger depuis la page chrome://extensions/.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script>
        var Output = "";    var LinkId = 0;
        var AllWindows = chrome.windows.getAll({populate:true}, function(wnds)  {
            for (var WIdx in wnds)      {
                var WndDiv = document.createElement("div");
                WndDiv.id = "wnd-"+wnds[WIdx].id;
                document.getElementById("content").appendChild(WndDiv);
                WndDiv["innerHTML"] += "<div>Fenêtre d'Id "+wnds[WIdx].id+</div>\n";
                (function(wid)      {
                    chrome.tabs.getAllInWindow(wid, function(tabs)      {
                        for(var TIdx in tabs)       {
                            document.getElementById("wnd-"+wid).innerHTML += 
                                (LinkId++)+" :<a href='"+tabs[TIdx].url+"'>"+
                                    tabs[TIdx].title+</a><br/>\n";
                        }
                    })
                })(wnds[WIdx].id);
            }
        })
    </script>
    <style>
        body    {   width:800px;    height:400px;   }
        #title  {   text-align:center;  font-weight:bold;   background-color:#CCC;      }
        #content > div > div    {   color:#FF8888;  font-weight:bold;   font-size:100%; }
        #content > div          {   color:black;    font-size:80%;  }
        #content > div > a      {   color:blue; }
    </style>
</head>
<body>
    <div id='title'>Fenêtres overtes</div>
    <div id='content'></div>
</body>
</html>


{ 
    "format_version": 1, 
    "id": "a16656a039d8b23731b3e933914f8bd7",
    "version": "1.0", 
    "name": "Opened URLs exporter", 
    "description": "Extraction des URLs de tous les tabs de toutes les fenêtres Chrome en cours d'exécution",
    "permissions": ["tabs"],
    "browser_action": {
        "default_icon": "icon.png",
        "popup":"tool.html"
    }
}

Et quand je clique dans l'icône de l'extension de la barre d'outil j'avais mes 75 URLs qui étaient affichées (presque) joliment.

Accueil