[Extension Chrome] Appliquer un style CSS a une page web

FoX_*D i E* · 13/03/2010, 00h31

Bonjour a tous,

Je ne sais pas si je suis dans le bon sous-forum pour le développement des extensions du
navigateur Chrome...

J'aimerais creer une extension Chrome (moi j'utilise Chromium, mais ca ne change rien) qui me
permetrait d'afficher une page en mode texte (sans images, et sans objets embed qui sont la cause
de beaucoup de bug chez Chromium).
J'ai pense passer par la fonction chrome.tabs.insertCSS().

Donc pour tester cette fonction, je veux changer le background d'une page qui n'en a pas defini, comme : http://html.comsci.us/examples/blank4t.html

Voici les fichiers presents dans mon dossier /Text Mode:
background.html
icon20.png
icon128.png
insertedcss.css
manifest.json
option.html

manifest.json

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "Text Mode",
  "version": "0.1",
  "description": "Disable all pictures and embedded objects of a web page.",
  "background_page": "background.html",
  "icons": { "128": "icon128.png" },
  "options_page": "option.html",
  "browser_action": {
    "default_icon": "icon20.png",
    "default_title": "Text Mode"
  },
  "permissions": ["tabs", "http://*/*", "https://*/*"]
}

background.html

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
	function dojumptotab() {
	    if (window.localStorage == null)
	      return true;
	    if (window.localStorage.textmodeactivtab == null)
	      return true;
	    if (window.localStorage.textmodeactivtab == "true")  
	      return true;
	    else return false;
    }
	// Called when the user clicks on the browser action icon.
	chrome.browserAction.onClicked.addListener(function(tab0) {
		chrome.tabs.create({"url": tab0.url,"selected": dojumptotab()}, function(tab1){
			chrome.tabs.insertCSS(tab1.id,{"file":"insertedcss.css"});
		
		});
	});
		
</script>		
</head>
</html>

insertedcss.css

Code :

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

body {background-color:#000000;}

option.html

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
<title>Settings for 'Text Mode' extension</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script>
	
	function toggleactivtab(radioButton) {
	  if (window.localStorage == null) {
	    -alert('Local storage is required for changing settings, please make them activated.');
	    return;
	  }

	  var selected = radioButton.value;
	  if (selected == "yes") {
	    window.localStorage.textmodeactivtab = true;
	  } else {
	    window.localStorage.textmodeactivtab = false;
	  }
	}
	
	function previous() {
	  if (window.localStorage == null) {
		alert('Local storage is required for changing settings, please make them activated.');
	    document.getElementById('activtab').disabled = true;
	    document.getElementById('noactivtab').disabled = true;
	    return;
	  }
		
        if (window.localStorage.textmodeactivtab == "true"){
        document.getElementById('activtab').checked = true;
	    document.getElementById('noactivtab').checked = false;
	    }
	    else{
	    document.getElementById('activtab').checked = false;
	    document.getElementById('noactivtab').checked = true;
	    }
	}
</script>

</head>
<body onload="previous()">
Jump to the tab created in Text Mode:&nbsp;&nbsp;
<input id="activtab" type="radio" name="radioactivtab" value="yes"
           onclick="toggleactivtab(this)">yes
&nbsp;&nbsp;<input id="noactivtab" type="radio" name="radioactivtab" value="no"
           onclick="toggleactivtab(this)">no
</body>
</html>

J'ai du mal a comprendre comment faire fonctionner tout ca. J'ai bien l'ouverture d'une nouvelle page avec le meme url, mais pas de fond noir

Guide des developpeurs, chrome.tabs

FoX_*D i E* · 15/03/2010, 06h57

en fin de compte j'ai prefere utiliser javascript, et ca marche impec

Il faudrait peut-etre un sous forum pour les plugins Chrome (extensions et autres) car il n'existe pratiquement aucun forum la-dessus sur le web (j'en ai trouve qu'un, pas tres frequente)

Resolu

[Extension Chrome] Appliquer un style CSS a une page web

Autres langages pour le Web

Discussions similaires

Partager

Partager