Chrome扩展程序,读取HTML元素的内容

Question

我正在尝试为Chrome浏览器开发扩展程序.我知道我想要实现什么,但有很多方法可以实现它,有些方法比其他方法更复杂.

我希望解析当前查看的电子邮件的内容,对其进行一些处理,而不是用修改后的内容替换原始内容.我想在着名的电子邮件客户端上使用扩展程序,例如Gmail,Yahoo,Hotmail等.

显然,很难识别HTML的哪一部分包含电子邮件的内容.我假设如果知道包含内容的HTML元素的标识符(或类),则应该直接检索内容,处理内容并将其注入.

有任何线索,这样做的最佳方法是什么？任何引用和剪切代码都会很棒. 记住,简单是幸福:)

谢谢.

UPDATE

为了消除任何疑虑,我不是要做任何恶意的事情.我希望为我的学术论文实施一个特定的校对工具.

Answer 1

您可能希望创建多个内容脚本(每个服务一个),只提取电子邮件正文的HTML.使用document.querySelector,除了使用的选择器和所需的JavaScript钩子之外,每个内容脚本都非常相似(见脚注).

然后,您将使用消息传递将HTML发送到您的后台页面,然后将其处理并发送回内容脚本.

内容脚本

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

背景页面

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.
});

脚注

由于大多数流行电子邮件客户端的更新频率,选择器可能会经常更改.此外,许多这些客户端使用Ajax动态填充全部或部分页面,因此您可能必须聪明地确定何时显示和更改电子邮件正文.理论上,这也意味着客户端可以轻松地擦除您的修改,动态更新电子邮件,因此您可能需要许多JavaScript挂钩.