mahdiweb
New Coder
I'm trying to create my first chrome extension but I can't fill a text field on a web from my chrome extension.
If I could get some help filling in this textfield or a general textfield it would be greatly appreciated.
Here are the files I have so far:
manifeste.json
index.html
popup.js
I noticed that the functions launch on the window of the "index.html" extension and not on the target web page, here are the images:
image 1
image 2
the codes works fine and here is the test link: https://codepen.io/Arthur222/pen/eYrVvwK?editors=1010
but they don't seem to work on a web page with my extension.
If I could get some help filling in this textfield or a general textfield it would be greatly appreciated.
Here are the files I have so far:
manifeste.json
JSON:
{
"name": "Zero",
"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": ["popup.js"]
}
],
"permissions": [
"activeTab",
"storage",
"scripting",
"tabs",
"clipboardWrite",
"notifications",
"contextMenus"
]
}index.html
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
JavaScript:
const button = document.getElementById('btn');
const input = document.getElementById('inpt');
button.onclick = () => {
functions[input.value]();
};
functions = {
1: function () { document.getElementById('a').value = '9: Object'; },
2: function () { alert(2); },
3: function () { alert(3); },
4: function () { alert(4); },
5: function () { alert(5); },
6: function () { alert(6); },
}I noticed that the functions launch on the window of the "index.html" extension and not on the target web page, here are the images:
image 1
image 2
the codes works fine and here is the test link: https://codepen.io/Arthur222/pen/eYrVvwK?editors=1010
but they don't seem to work on a web page with my extension.
