Appeler des fonctions JS depuis input sur extension chrome
mahdiweb
Messages postés
11
Date d'inscription
Statut
Membre
Dernière intervention
-
mahdiweb -
mahdiweb -
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:
- Appeler des fonctions JS depuis input sur extension chrome
- Changer extension fichier - Guide
- Appeler en privé - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Extension dat - Guide
- Google chrome - Télécharger - Navigateurs
1 réponse
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.