javascript - 将命令从Javascript转换为Greasemonkey

我正在尝试向页面添加字符计数器，在此页面上我输入了三个值，并且它在div的innerHTML中返回了一个大字符串，其ID为“ AnswerBoxID”，现在我希望我的脚本明显地对数字进行计数我写过的字符

var submit=document.getElementsByClassName('Row3');
function countChars(){
    count = document.getElementById('AnswerBoxID').innerHTML.length;
    document.title ="Chars "+count+"/160";
}

它返回粗略的字符近似值，然后将其粘贴到编辑器或其他计算字符的东西中时，我又得到了不同的结果，用这种方法计算得出的结果与所报告的其他内容（特别是notepad ++）相差5个字符。

但是我最大的问题是我一直无法获取countChars（）进行更新
当document.getElementById('AnswerBoxID').innerHTML的值更新时，在javascript中我使用以下代码克服了该问题

var submit=document.getElementsByClassName('Row3');
for (i=0; i<submit.length; i++){
    submit[i].firstChild.setAttribute('onclick','countChars()');
}

阅读GM Pitfalls 2后，我随后将方法修改为以下内容

for (i=0; i<submit.length; i++){
    submit[i].firstChild.addEventListener('click',countChars(),true);
}

但是它仍然不起作用！
在有人问是之前，我确实在函数之前定义了count变量。我真的不介意最精确的长度，我希望它更精确，但是我确实想将运行countChars（）的onclick元素添加到提交按钮中。

最佳答案

Greasemonkey脚本在沙盒中运行。这意味着该脚本在页面的onload事件中运行，然后被删除。提交表单时调用Greasemonkey脚本的countChars()函数将返回undefined错误，因为您的函数对象不再存在于DOM中。

这是我简化的contentEval函数（基于GM Wiki的Content Script Injection函数）：

function contentEval(source) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javascript");
    script.textContent = source;
    document.head.appendChild(script);
}

您也可以设置text属性而不是textContent以与旧版IE版本兼容，谢谢RogG！

将该函数放入您的GM脚本中，它将用于将您以后需要使用的所有函数附加到DOM的头部。

将您的countChars函数作为参数传递给contentEval函数：

contentEval(function countChars() {
    var count = document.getElementById('AnswerBoxID').textContent.length;
    document.title ='Chars '+count+'/160';
});

这样，您的countChars函数将被放置在文档script附加的head元素内，在GM脚本的执行时间结束后可以访问该元素。

如果要检查上面代码的演示，请在this fiddle中使用DOM Inspector。它会创建一个新的script元素，该元素会附加到（在JSfiddle的情况下为iframe的）文档的head中，这意味着您可以在需要时访问它。

您也可以将函数简单地附加到unsafeWindow，但是除非绝对必要，否则应避免使用unsafeWindow，请注意，Google Chrome浏览器不支持unsafeWindow。

将此页面用作参考：http://wiki.greasespot.net/Content_Script_Injection

还可以使用.textContent方法来获取元素（及其后代）的文本内容，如RobG所述。