javascript - JS挑战: Load changed text into the DOM on page reload

Question

我正在开发一个 JS chrome 扩展，它允许用户修改任何网页上的文本。挑战在于，当用户再次访问网页时，他/她应该看到修改后的文本而不是原始页面的文本。 假设用户只能修改段落元素 (p)

换句话说，在页面加载时，扩展程序需要扫描文档 - 找到匹配的文本并修改它。

这是一个具有挑战性的问题，因为:
- 在两次访问之间，页面可能会发生变化
- 可能会出现任意数量的文本。例如，字符串“I am a ninja”可能在一个页面中出现 10 次。- 其他扩展也可以修改 DOM(谁知道用户安装了哪些扩展)。- 这需要在任何网页上运行

在随后的页面访问中，当用户需要查看他/她修改的文本时 - 您将如何确定要修改的文本？现在我正在执行简单的字符串匹配，即离理想还很远。

理想情况下，我将有一个函数来扫描文档中的每个元素，并返回这是用户修改的元素的可能性的百分比确定度 (0 - 1)。

脚注:我意识到，在某些情况下，页面将被完全修改，并且不可能找到该元素，但是，我对这些实例不感兴趣 - 在这些情况下，我将以不同的方式呈现它们 。

Answer 1

简单地思考一下，我想出了这个(但不是完整的解决方案):每当用户选择要修改的文本，右键单击并调用您的扩展程序时，您应该做的是:

使用 Selection 和 Range 对象获取最近的正确节点(具有类和 ID)(如果不存在，则仅使用最近的节点)节点)，其中存在范围。我假设标记的文本不能位于 textarea 或 input 元素内。然后，获取 offset所选文本的。获取最近的正确节点的详细信息，即 class 和 id。

将所有数据存储到同步或本地配额存储中，然后在用户下次访问该页面时使用该数据重新修改文本。

请注意，这假设这些正确的节点在以后的时间点不会被修改。比如，如果我在这个答案中标记了一些文本，然后删除了答案的其他部分，这使得这个文本偏移左移，那么上面的解决方案将不起作用。