Question

环境：适用于Firefox 62的WebExtension

我写了一个文本扩展名，可以“监视” textarea字段中的更改，然后对内容进行一些处理。对于我手动输入到文本区域中的更改（键入，粘贴，删除，...），这可以完美地工作。

但是，我还使用了另一个WebExtension（http://aecreations.sourceforge.net/clippings/index.php），它允许定义文本模板并将这些模板通过从弹出菜单中进行选择而插入到textarea元素中。

我无法检测到textarea字段值的这些更改。

以下是演示该问题的代码示例：

manifest.json

{
  "manifest_version": 2,
  "name": "ChangeDetection",
  "version": "0.1",
  "description": "Keep track of changes to text area",

  "applications": {
    "gecko": {
      "id": "Change@Detection"
    }
  },

  "content_scripts": [
    {
      "matches": ["*://*.stackoverflow.com/*"],
      "js": ["ChangeDetection.js"]
    }
  ]
}

ChangeDetect.js

console.log("~~~ ChangeDetection ~~~");
if (window.top === window.self) {
  addLogChangeListener();
} else {
  console.log("No-op because we're in a frame");
}

function addLogChangeListener() {
  var field = document.querySelector('#wmd-input')
  console.log('field', field);
  if (field) {
    console.log('Adding change listener');
    field.addEventListener('input', callback, false);
  }
}

function callback(input) {
  console.log('--- callback ---', input);
  var field = document.querySelector('#wmd-input')
  if (field) {
    var value = field.value;
    console.log('- value', value);
  }
}

每当我在文本区域中键入任何内容时（对于示例代码而言，该文本区域用于在stackoverflow.com上输入我的问题），都会调用回调并将字段内容记录到控制台。

但是，如果我使用Clippings设置模板（右键单击->组织剪辑；定义裁剪；然后：右键单击->选择模板），则模板文本会插入文本区域，但是我的事件监听器不是触发。

有趣的是，不仅仅是我的web扩展错过了更改，输入窗口下方的后预览也不会更新，直到我键入另一个键为止。

我想这是Clippings将文本插入到textarea中的特殊方式。有什么办法可以检测到这一点？

我快速浏览了Clippings的源代码，找到了一些可以处理https://github.com/aecreations/clippings/blob/master/src/modules/aeInsertTextIntoTextbox.js上的文本插入的代码，但是不确定是否使用了该代码。

我尝试了与“输入”不同的事件，例如“更改”，“粘贴”和“属性更改”。我也尝试过使用MutationObserver，但这也不起作用。

WebExtension：检测另一个WebExtension对文本区域的更改

0 个答案: