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

Version imprimable

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:

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:

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:

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:

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]();
}

19/09/2022, 13h17
mathieu

et quel est le souci ?
pour présenter le code sur ce forum, il y a le bouton "#" de l'éditeur.
19/09/2022, 13h34
mahdiweb

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
19/09/2022, 15h48
Doksuri

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

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:

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.

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

popup.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
<!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:

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:

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.