Convertir un code html+ javascript en Extension chrome

**mahdiweb** · 21/09/2022, 16h03

Je souhaite créer ma première extension sous chrome et j'ai ce code réalisé par SpaceFrog et la source:

Code html :

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
<input name="inpt" id="inpt" />
<button id="btn" onClick="onClickHandler( document.getElementById('inpt').value )">Enter</button>
 
<script>
functions = {
 1 : function(){alert(1);},
 2 : function(){alert(2);},
 3 : function(){alert(3);},
 4 : function(){alert(4);},
 5 : function(){alert(5);},
 6 : function(){alert(6);},
}
 
function onClickHandler(f){
  functions[f]();
}
 
</script>

maintenant je veux convertir ce code en extension chrome et j'ai donc fait ce qui suit:

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
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
    "name": "Zero Retard",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Auto fill form GRC",
    "icons": { 
        "16": "icon/icon.png",
        "48": "icon/icon.png",
        "128": "icon/icon.png" 
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "icon/icon.png"
    },
    "options_page": "options.html",
    "content_scripts": [
        {
            "matches" : [
                "http://*/*",
                "https://*/*"
            ],
            "js": ["jquery-3.6.0.min.js", "injector.js"]
        }
    ],
    "permissions": [
        "clipboardWrite",
        "activeTab",
        "notifications",
        "contextMenus",
        "storage",
        "scripting",
        "tabs"
    ]
}

index.html

Code html :

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
<!doctype html>
<html>
  <head>
<style>
body {
min-width: 120px;
overflow-x: hidden;
font-family: Arial, sans-serif;
font-size: 12px;
        }
        input, textarea {
            width: 140px;
        }
        input#save {
            font-weight: bold; width: auto;
 
        }
    </style>
 
  </head>
  <body>
<h1>GRC</h1>
    <center><form>
  <div>
<label><b>Veuillez saisir un code</b></label>
    <input name="inpt" id="inpt" autocomplete="off"/>
 <p>
<button id="btn">Enter</button>
<script src="popup.js"></script>
</p>
  </div>
</form></center>
  </body>
</html>

popup.js

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
const button = document.getElementById('btn');
const input = document.getElementById('inpt');
 
button.onclick = async evt => {
 
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['injector.js'],
 
  });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: inPage,
    args: [input.value],
  });
  window.close();
};
 
function inPage(popup) {
  functions[popup]();

injector.js

Code :

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

1
2
3
4
5
6
7
8
functions = { 
  1 : function(){alert(1);}, 
  2 : function(){alert(2);}, 
  3 : function(){alert(3);},
  4 : function(){alert(4);}, 
  5 : function(){alert(5);}, 
  6 : function(){alert(6);}, 
}

Existe-t-il une solution qui me permette de le faire. Je suis assez nouveau dans tout cela, donc toute aide serait très appréciée.

**SpaceFrog** · 21/09/2022, 16h45

https://sylvain-dangin.developpez.co...google-chrome/

**mahdiweb** · 26/09/2022, 10h09

j'ai réussi à faire cela :

manifest.json

Code :

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

1
2
3
4
5
6
7
8
9
{
  "name": "Zero Retard",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Auto fill form GRC",
  "action": {
    "default_popup": "index.html"
  }
}

popup.js

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
const button = document.getElementById('btn');
const input = document.getElementById('inpt');
 
button.onclick = () => {
  functions[input.value]();
};
 
functions = {
  1: function () { alert(1); },
  2: function () { alert(2); },
  3: function () { alert(3); },
  4: function () { alert(4); },
  5: function () { alert(5); },
  6: function () { alert(6); },
}

mais maintenant je veux remplacer les alertes comme suite pour remplir un formulaire web:

par exemple, je change alert(1) par
document.getElementById('categorisation_1').value = '2: Object' et
document.getElementById('categorisation_2').value = '3: Object';,

Code :

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

1
2
3
1: function () { document.getElementById('categorisation_1').value = '2: Object'; 
document.getElementById('categorisation_2').value = '3: Object';
},

Est ce que c'est faisable déjà ou non et est ce que vous avez des propositions svp?

**mahdiweb** · 26/09/2022, 17h34

J'ai ce code ci- dessous qui affiche des alertes:

manifeste.json

Code :

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

1
2
3
4
5
6
7
8
9
{
  "name": "Zero Retard",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Auto fill form GRC",
  "action": {
    "default_popup": "index.html"
  }
}

popup.js

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
const button = document.getElementById('btn');
const input = document.getElementById('inpt');
 
button.onclick = () => {
  functions[input.value]();
};
 
functions = {
  1: function () { alert(1); },
  2: function () { alert(2); },
  3: function () { alert(3); },
  4: function () { alert(4); },
  5: function () { alert(5); },
  6: function () { alert(6); },
}

mais mon objectif c'est de remplir un formulaire Web avec ce code, donc je veux remplacer les alertes par les fonctions suivantes par exemple, je remplace
"alert(1)"
par
"document.getElementById('categorisation_1').value = '2: Object' ; document.getElementById('categorisation_2').value = '3: Object';"

et la fonction sera :

Code :

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

1: function () { document.getElementById('categorisation_1').value = '2: Object'; document.getElementById('categorisation_2').value = '3: Object'; },

J'ai ce message d'erreur qui s'affiche.
Nom : AYHUd.png
Affichages : 286
Taille : 17,7 Ko

Si vous avez des suggestions, ce serait très apprécié?

**SpaceFrog** · 27/09/2022, 08h23

l'élément visé pa r document.getElementById n'existe pas au moment ou la ligne est interprétée ...

**mahdiweb** · 28/09/2022, 17h27

oui effectivement, j'ai remarqué que les fonctions s'exécutent sur la page index.html de l'extension mais non pas sur la page web cible voici les photos:

Nom : Sans titre1.png
Affichages : 248
Taille : 189,5 Ko

Nom : Sans titre1.png
Affichages : 248
Taille : 189,5 Ko

Nom : Sans titre.png
Affichages : 250
Taille : 159,1 Ko

donc je dois savoir comment faire pour injecter les fonctions sur la page web et non pas sur la fenêtre de l'extension.

**mahdiweb** · 11/10/2022, 10h17

enfin j'ai réussi à atteindre mon objectif je vous remercie beaucoup pour votre aide précieuse et je vous en suis très reconnaissant merci beaucoup à vous @SpaceFrog et @Doksuri

Convertir un code html+ javascript en Extension chrome

JavaScript

Discussions similaires

Partager

Partager