Good afternoon. I have questions about working with the Chrome API and I can't find good manuals, or I just don't understand what it says. I need to write an extension (manifest V3), which, by clicking on the button, replace each word of the web page with the word "meow". There is a design and HTML basis and it can not be changed. But the JavaScript code is executed only inside the extension itself, and it needs to be executed in the active tab. I absolutely do not understand how to arrange it. I hope my description is not too crooked, I use a translator. I'll attach the code.
background.html
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet"href="background.css">
<h1 class="Mtr">meow translate</h1>
<img src="catze.png" width="181" height="179" class="cat">
<button id="trans">Meow-meow</button>
<script src="background.js"></script>
</body>
</html>
background.css
body {
margin: 0;
width: 240px;
height: 292px;
background-color: #FF9BAA;
display: flex;
flex-direction: column;
align-items: center;
}
#trans {
width: 140px;
height: 21px;
font-family: 'Quiet Meows';
font-size: 15px;
line-height: 17px;
background-color: #FF8295;
border-radius: 15px;
}
.Mtr {
font-family: 'Quiet Meows';
font-weight: 400;
font-size: 20px;
line-height: 23px;
color: #000000;
}
.cat {
margin-bottom: 15px;
}
Manifest.json
{
"name": "Meow Translator",
"description": "Extract all images from current web page",
"version": "1.0",
"manifest_version": 3,
"icons":
{
"48":"icon48.png",
"128":"icon128.png"
},
"action": {
"default_popup":"background.html"
},
"permissions": ["scripting", "activeTab"],
"background":{}
}
Background.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("trans").addEventListener("click", replaceWords);
});
function replaceWords() {
var elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var text = element.innerHTML;
var words = text.split(' ');
for (var j = 0; j < words.length; j++) {
words[j] = 'meow';
}
element.innerHTML = words.join(' ');
}
}
The written word replacement function replaceWords in the JS file, works only inside the extension, that is, all the words specifically of the extension interface are replaced with "meow", I don't know how to make the code work on the active tab at the time of pressing the button. The extension is written for Chromium-based browsers.
