(Apologies in advance for any English mistakes)
Hello everyone, I am currently developing a simple Chrome extension to edit certain graphics and text fields on a website (Freshdesk) that cannot be modified directly on the site due to proprietary code.
My issue lies in ensuring that the function which replaces the text is active every time the pages are displayed. Currently, I am utilizing a setInterval() with a 100 ms delay to achieve this, but it's not the most optimal solution as the function ends up running multiple times within seconds.
function main() {
console.log('main started');
setInterval(changeText, 100); //(Not optimized)
}
function changeText() {
// replace 'Group' with 'Sector' in the ticket tab visual
$('.ember-power-select-placeholder.label-field').each(function(x){
var new_text = $(this).text().replace("Group", "Sector");
$(this).text(new_text);
console.log('function started');
})
}
main();
As shown in the screenshots and code above, the task at hand is to change the text from
Group
to
Sector
Although the code does work, the issue arises when observing the console output.. (after approximately 5 seconds).
I have experimented with various methods to ensure the JavaScript runs once the page loads, but none have proven successful. Do you have any suggestions to improve this situation?
EDIT: Here is the manifest.json:
{
"name": "DAN-Patch",
"version": "1.0",
"manifest_version": 2,
"permissions": [
"webNavigation",
"activeTab",
"background",
"tabs"
],
"content_scripts": [
{
"run_at": "document_idle",
"matches": ["https://gestionaledan.freshdesk.com/*", "https://gestionaledan.freshworks.com/*"],
"js": ["jquery-3.5.1.min.js", "content.js"],
"css": ["stylesheet.css"]
}
]
}