0

I am interested in making an extension for chrome but I am new and as you can imagine I have a thousand doubts.

Specifically, in my gmail account, on the main page of received emails, you need to INJECT an icon in some emails from the list (those that have supposedly been read).

For example, I have the data-legacy-thread-id of these emails that I want to inject the image just below the CHECK BOX, as shown in the image.

1

Knowing the data-legacy-thread-id of the emails to which I want to inject the icon, could someone tell me how to make the icon appear only in those emails?

2

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Ciprian Sandu
  • 3
  • 3

1 Answers1

1

Firstly I would create a class, 'Yourclass' with the name you want and append it to the head using javascript. Example: (Changes the font and creates a class and a keyframe for shadows)

var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '\
    body {\
  font-family: Copperplate;\
    }\
    .shadows {\
  animation: shadowmove 4s infinite;\
}\
\
@keyframes shadowmove {\
  50% {box-shadow: 0px 0px 15px black;}\
}';
        document.getElementsByTagName('head')[0].appendChild(style);

See this: Add CSS to <head> with JavaScript?

Use a querySelector or getElementbyID to go through each id and then using the Parent Element I would get, well, the parent Element. Then append a Child (in your case an image). To that child add the ClassName 'Yourclass' to those elements and continue iterating through every ID you have.

hope you like this approach!

Comment anything you need and I’ll try to add some code (I’ve done some extensions that do similar things).

comment: try blur private info (even if its not yours) Also I would have named the question Insert img in a specific div (with an ID) using pure vanilla Javascript

V.G.
  • 51
  • 3