My friend and I have been developing a Chrome extension for the Roblox Devforum with some initial success. We started working on it yesterday, and already have our button placed in the header similar to extensions like Roblox+ or RoPro.
However, we encountered an issue with the button when hovering over it. A white square appears on the button icon, making it look unappealing. Despite researching various articles on Google, we couldn't identify the cause of this problem, which is why we are reaching out here today. The code for the extension is as follows:
modifications.js:
function getFirstulWithClass(cssClass) {
var elements = document.getElementsByTagName('ul');
for (var i = 0; i < elements.length; i++) {
if((' ' + elements[i].className + ' ').indexOf(' ' + cssClass + ' ') > -1) {
return elements[i];
}
}
}
var ul = getFirstulWithClass('icons d-header-icons');
if (ul) {
ul.innerHTML += `
<li class="header-dropdown-toggle dpp-dropdown">
<a title="DPPSettings" class="icon">
<div>
<img src="https://i.imgur.com/suZBJ8y.png" width="45" height="29" title="DSI" class="DSI">
</div>
</a>
</li>
`
}
To explain this code, it simply locates the header element and injects the HTML code snippet into it without replacing the original Devforum header code.
We wanted to add an animation to the button to make it visually appealing, so we created a new file called modifications.css, which contains the following:
@keyframes settingsHover {
0% {
width: 45px;
height: 29px;
}
100% {
width: 48px;
height: 31px;
}
}
.DSI:hover {
animation-name: settingsHover;
animation-fill-mode: forwards;
animation-duration: .01s;
}
This code adds a subtle enlargement animation to the button on hover.
We then integrated everything in our manifest.json file as shown below:
"content_scripts": [
{
"matches": ["https://*.devforum.roblox.com/*"],
"css": ["modifications.css"],
"js": ["modifications.js"]
}
],
However, this integration resulted in a strange box being added unintentionally, as illustrated in the image below:
https://i.sstatic.net/IkgGN.png
How can we resolve this issue?