Chrome扩展程序，读取HTML元素的内容 [英] Chrome extension, reading a content of HTML element

问题描述

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

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 complicated than others.

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

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.

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

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 :)

谢谢。

更新

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

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

推荐答案

你可能想创建多个内容脚本（每个服务一个），只提取电子邮件正文的HTML。使用 document.querySelector ，每个内容脚本都会非常类似的除了使用的选择器和所需的JavaScript钩子（见脚注）。

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

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

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.

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

脚注

由于更新频率最受欢迎的电子邮件客户端，选择器可能会经常更改。此外，许多客户使用 Ajax 动态填充全部或部分页面。因此，您可能必须聪明地确定何时显示和更改电子邮件正文。从理论上讲，这也意味着客户可以轻松地通过动态更新电子邮件来修改您的修改，因此您可能需要许多JavaScript挂钩。

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.

这篇关于Chrome扩展程序，读取HTML元素的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！