Appeler des fonctions JS depuis un champ de texte avec extension Chrome

**mahdiweb** · 19/09/2022, 12h04

Je suis entrain de créer ma première extension chrome et j'ai des soucis pour appeler des fonctions JS depuis la page index html, je pense que le problème c'est au niveau du code background.js, voici les composants de mon extension:
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
<!doctype html>
<html>
  <head>
    <style>
      html, body {
        height: 80px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <h1>GRC</h1>
<form>
  <div>
    <label for="example">Veuillez saisir un code</label>
    <input name="inpt" id="inpt"/>
    <button id="btn" onClick="onClickHandler( document.getElementById('inpt').value )">Enter</button>
    <script src="background.js"></script>
</form>
  </div>
  </body>
</html>

background.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
document.addEventListener('DOMContentLoaded', function () {
    // Get button by ID
    var button = document.getElementById('btn');
    button.onclick = document.getElementById('inpt').value;
});
 
async function onClickHandler(f){
  functions[f]();
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['injector.js']
 
    });
    window.close();
}

injector.js
----------------

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
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]();
}

**mathieu** · 19/09/2022, 13h17

et quel est le souci ?
pour présenter le code sur ce forum, il y a le bouton "#" de l'éditeur.

**mahdiweb** · 19/09/2022, 13h34

je n'arrive pas à exécuter les fonctions qui sont sur le fichier injector.js il y a des erreurs je ne sais pas ou exactement et j'espère que vous m'aider svp

**Doksuri** · 19/09/2022, 15h48

salut, il faut que tu passes par l'api des messages developer.chrome.com/docs/extensions/mv3/messaging/

**mahdiweb** · 19/09/2022, 17h13

lorsque j’ appels une seule fonction sur injector.js en appuyant sur un bouton (id:"fillForm") sans input ça marche avec le script suivant :

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
document.addEventListener('DOMContentLoaded', function () {
    // Get button by ID
    var button = document.getElementById('fillForm');
    button.onclick = injectScript;
});
 
async function injectScript() {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['injector.js']
 
    });
    window.close();
}

mais le problème se pose quand j'essaye d'appeler les fonctions depuis un input je dois adapté ce code précèdent mais franchement je ne sais pas comment le faire.

**mahdiweb** · 21/09/2022, 08h56

j'avance un peux après quelques modification j'ai maintenant les codes suivants:

popup.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);}, 
}

mais ça ne marche toujours pas si vous avez des propositions svp et merci.

Appeler des fonctions JS depuis un champ de texte avec extension Chrome

JavaScript

Discussions similaires

Partager

Partager