Search code examples
javascriptgoogle-chromegoogle-chrome-extensioninboxsdk

How to remove tracking pixel from gmail body when we reply to a email?


In my chrome extension I am using Inbox.sdk.
When someone sends a email I am adding a tracking pixel into it. But when someone reply to our mail. And then we reply to it - tracking pixel is present inside of the body - in trimmed section - How can we get rid of that tracking pixel.

For example
A and B are in conversation and A is using my plugin -

A                                                      --------> . B
(will attach a tracking pixel TP1)

Now B will reply to A
A                                                     <---------- B

When A send reply to B
A                                                     ----------> B
(will attach a new tracking pixel TP2)
but now we are sending two tracking pixel -
1. TP2
2. TP1 - because it was present inside the body of reply - inside the trimmed content. So the problem is how can we remove that old content from the body of reply.
By using inbox sdk I can only grab body if trimmed content is opened other wise- we cannot grab content inside boy of trimmed content.
If issue is unclear I am availble comment and I will try to expand more.


Solution

  • Gmail saves the trimmed content inside a hidden input field with name="eut". What you can do is get the message body, find the nearest grandparent table which actually encapsulates the reply message. Then find this input element, loop over it and remove all the tracking pixels. After that simply, insert your new tracking pixel and you are good to go.

    // get message body
    var msg_el = composeView.getBodyElement();
    
    // find the table which encapsulates the whole reply email.
    var parent_div = el.closest('table').parentElement.closest('table').parentElement;
    var email_form = parent_div.querySelector("form");
    var form_input = email_form.querySelector('input[name="uet"]');
    
    // get the trimmed text, convert it to a html object and remove tracking pixels
    var email_text = form_input.value;
    
    var images = $(email_html).find('img');
    var val = null;
    if (images.length > 0){
        for (var i = 0; i < images.length; i++) {
             var src = images[i].src;
             // find tracking pixel using url
             if (src.indexOf("tracking-pixel") !== -1){
                 email_html.find(images[i]).remove();
            }
        }
    }
    val = email_html.outerHTML;
    el.outerHTML = val;
    
    // Insert your tracking pixel here.
    

    Hope this helps.