I am trying to develop an extension for Chrome browser. I know what I want to achieve, but there are many ways to achieve it, some are more plicated than others.

I wish to parse the content of the currently viewed email, do some processing on it, than replace the original content with the modified one. I want to use the extension on famous email clients, such as Gmail, Yahoo, Hotmail, etc.

Apparently, it is hard to recognize which part of the HTML holds the content of the email. I assume that if the identifier (or class) of the HTML element, which holds the content, is known, then it should be straightforward to retrieve the content, process it, and inject it back.

Any clue what is the best method to do so? Any references, and snipped codes will be great. Remember, simplicity is a bliss :)

Thanks.

UPDATE

To clear any doubts, I am not trying to do anything malicious. I wish to implement a specific-proofing tool for my academic thesis.

I am trying to develop an extension for Chrome browser. I know what I want to achieve, but there are many ways to achieve it, some are more plicated than others.

I wish to parse the content of the currently viewed email, do some processing on it, than replace the original content with the modified one. I want to use the extension on famous email clients, such as Gmail, Yahoo, Hotmail, etc.

Apparently, it is hard to recognize which part of the HTML holds the content of the email. I assume that if the identifier (or class) of the HTML element, which holds the content, is known, then it should be straightforward to retrieve the content, process it, and inject it back.

Any clue what is the best method to do so? Any references, and snipped codes will be great. Remember, simplicity is a bliss :)

Thanks.

UPDATE

To clear any doubts, I am not trying to do anything malicious. I wish to implement a specific-proofing tool for my academic thesis.

• javascript
• html
• dom
• google-chrome-extension

• 1 I'm not sure whether I should think about answering this one (seems malicious to me). You must understand that each and every web-based email client behaves different and is based on a bunch of JavaScript features. Furthermore, they may modify their functionality 'randomly'. – home Commented Mar 10, 2012 at 18:09
• @home, I am familiar with what you say. Disappointingly, there is no frontend javascript API for Gmail. My original post does not reveal much, but if you are curious... I wish to implement a specific-proofing tool. – Mr. Commented Mar 10, 2012 at 18:13

1 Answer 1

You'll probably want to create multiple content scripts (one for each service) that simply extracts the HTML of the email body. Using document.querySelector, each content script will be very similar except for the selector used and the JavaScript hooks required (see footnote).

You would then use message passing to send the HTML to your background page and where it would then be manipulated and sent back to the content script.

Content Script

var element = document.querySelector('.gmail .email-body'); // Not actual selector
chrome.extension.sendRequest({
  html:    element.innerHTML, 
  service: 'gmail'
}, function (response) {
  element.innerHTML = response.html;
});

Background Page

chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
  var element = document.createElement('div');
  element.innerHTML = request.html;
  // TODO: Manipulate `element` based on `request.service`...
  sendResponse({html: element.innerHTML});
  // Alternatively, you could just manipulate the HTML string itself.
});

Footnote

Due to the update frequency of most popular email clients the selectors will probably change often. Also, a lot of these clients populate all or part of the pages dynamically using Ajax so you may have to be clever in how to determine when email body is displayed and changed. In theory, this also means that your modifications could easily be wiped by a client dynamically updating an email so you may required many JavaScript hooks.