Sujet Précédent Sujet Suivant

Appeler des fonctions JS depuis input sur extension chrome

Fermé
mahdiweb Messages postés 11 Date d'inscription mardi 20 septembre 2022 Statut Membre Dernière intervention 26 octobre 2022 - 20 sept. 2022 à 13:14
 mahdiweb - 21 sept. 2022 à 09:07

Bonjour,

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:


fichier manifest.json
-----------------------------

	"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"
	]
}

fichier index.html
-----------------------

<!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>

fichier background.js
----------------------------

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

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

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

merci d'avance
Windows / Chrome 91.0.4472.77

A voir également:

1 réponse

Réponse 1 / 1
mahdiweb
21 sept. 2022 à 09:07

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

popup.html
-------------------

 
<!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
-----------------------

 
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
----------------

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.
0

Discussions similaires

input signal out of range
marlene -
usman000 -

14 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Je peux appeler mais ne peux pas recevoir d'appel
Tom -
bazfile -

4 réponses
comment désactiver out of range
lzri98 -
jeannets -

3 réponses