Convertir un code html+ javascript en Extension chrome
Je souhaite créer ma première extension sous chrome et j'ai ce code réalisé par SpaceFrog et la source:
Code:
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:
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
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);},
} |
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.
1 pièce(s) jointe(s)
comment remplir un formulaire par des fonctions depuis une extension chrome ?
J'ai ce code ci- dessous qui affiche des alertes:
manifeste.json
Code:
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:
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:
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.
Pièce jointe 626192
Si vous avez des suggestions, ce serait très apprécié?
