how to change an alert function by fill function on a chrome extension

SLAWI MAHDI

unread,

Sep 27, 2022, 4:24:19 AM9/27/22

to Chromium Extensions

in my chrome extension I have the codes below which display alerts correctly:

manifeste.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": ["jquery-3.6.0.min.js", "popup.js"]
}
],
"permissions": [
"activeTab",
"storage",
"scripting",
"tabs",
"clipboardWrite",
"notifications",
"contextMenus"
]
}

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

I want to keep the same principle, i.e. to enter a code in the text field of the index.html page and launch a function, but I want to replace the alert functions with filling functions as follows:

instead of 1: function () { alert(1); },

i want to put

1: function () {
var element = document.getElementById('categorisation_1');
var element = document.getElementById('categorisation_2');
if (element != null && element.value == '') {
const select1 = document.getElementById('categorisation_1');
const select2 = document.getElementById('categorisation_2');

select1.addEventListener('change', () => {
select2.removeAttribute('disabled');
});

setTimeout(() => {
select1.value = '2: Object';
select1.dispatchEvent(new Event("change"));
}, 1E3);

setTimeout(() => {
select2.value = '1: Object';
select2.dispatchEvent(new Event("change"));
}, 2E3);

},

When I did the test with the method I just mentioned, I received the following error message:

Is there a solution that allows me to do this. I'm fairly new to all of this, so any help would be much appreciated.

wOxxOm

unread,

Sep 27, 2022, 5:34:54 AM9/27/22

to Chromium Extensions, mahd...@gmail.com

It usually means you forgot a closing parenthesis and indeed it is the case: add } right before the highlighted place so it looks like }},

You can use an IDE or editor that detects such problems automatically e.g. VSCode.

SLAWI MAHDI

unread,

Sep 27, 2022, 5:43:09 AM9/27/22

to Chromium Extensions, wOxxOm

yes indeed thank you there is a missing "}" but I still have another error message now

and the function still does not fire.

wOxxOm

unread,

Sep 27, 2022, 6:09:40 AM9/27/22

to Chromium Extensions, mahd...@gmail.com, wOxxOm

It means your popup.html incorrectly specifies the id or you run popup.js in the wrong place e.g. in content_scripts or in executeScript. You need to debug it, but don't use chrome://extensions page because it lists old errors and isn't interactive. There's a much better way to debug: right-click the popup and click inspect, which will open devtools where you can set breakpoints in the source, then press F5 or Ctrl-R to restart the popup and inspect the state of DOM and variables at an exact moment when the line with the breakpoint runs.

SLAWI MAHDI

unread,

Sep 27, 2022, 6:36:21 AM9/27/22

to Chromium Extensions, wOxxOm, SLAWI MAHDI

I found that

and that

SLAWI MAHDI

unread,

Sep 28, 2022, 11:15:28 AM9/28/22

to Chromium Extensions, SLAWI MAHDI, wOxxOm

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:

Sans titre1.png

Sans titre.png

my question is how to launch the functions of my extension on a web page?

wOxxOm

unread,

Sep 28, 2022, 11:26:20 AM9/28/22

to Chromium Extensions, mahd...@gmail.com, wOxxOm

Remember what you did a few days ago in the previous topic and put the code that should run in the web page inside a function or a file that you specify in executeScript.

SLAWI MAHDI

unread,

Sep 28, 2022, 11:52:24 AM9/28/22

to Chromium Extensions, wOxxOm, SLAWI MAHDI

frankly I'm stuck sorry but I remember the code you gave me:

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: ['popup.js'],

});
await chrome.scripting.executeScript({
target: {
tabId: tab.id
},
func: inPage,
args: [input.value],
});
window.close();
};

function inPage(index) {
functions[index]();

but I don't know how the exploited is what I have to create a new background.js file and insert it in it help me please it's too complicated for me I summarize what I have now:

manifeste.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": ["jquery-3.6.0.min.js", "background.js", "popup.js"]

}],
"permissions": [
"activeTab",
"storage",
"scripting",
"tabs",
"clipboardWrite",
"notifications",
"contextMenus"
]
}

index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<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 = () => {
functions[input.value]();
};

functions = {
1: function() {

I would be very grateful

PhistucK

unread,

Sep 28, 2022, 1:57:04 PM9/28/22

to SLAWI MAHDI, Chromium Extensions, wOxxOm

From what I can see, you are trying to get an element with an ID of "categorisation_1", but the page does not have any element with that ID.

Since this kind of questions (and by the look of the previous replies, the other questions are similar) is unrelated to extensions in particular, you might want to try stackoverflow.com instead.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/5065f7c6-782c-4eec-b26a-0b22009a021an%40chromium.org.

HSSAINI MAHDI

unread,

Sep 28, 2022, 3:27:32 PM9/28/22

to PhistucK, Chromium Extensions, wOxxOm

I explain my request, I have an intranet web interface with text fields to fill and the id "categorisation_1" is only one example so I want to do an automatic filling instead of doing it manually several times a day.
I was able to collect some information that helped me do most of it, but unfortunately the problem that remains is to execute the code on the web page and not on the extension window.
what I want to know now is how to make the connection between background.js and popup.js so that my functions run in the web page after the button click.

I already shared my request on the link: https://stackoverflow.com/questions/73864317/why-the-functions-of-my-extension-are-not-injected-on-the-web-page

Reply all

Reply to author

Forward