[Extension Chrome] Appliquer un style CSS a une page web
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:
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:
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:
body {background-color:#000000;}
option.html
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
| <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:
<input id="activtab" type="radio" name="radioactivtab" value="yes"
onclick="toggleactivtab(this)">yes
<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
