使用Chrome扩展程序将字符插入Facebook等网站

时间:2017-11-15 03:05:16

标签: facebook google-chrome google-chrome-extension

我创建了一个chrome扩展程序,允许用户在文本框中单击鼠标右键,然后插入特殊字符。这适用于许多站点,如StackOverflow,但不适用于Facebook等网站。这是因为Facebook没有使用标准文本框表单控件。而不是文本消息中的每一行,它似乎使用div > div > span > span构造。有没有办法创建Chrome扩展程序来定位页面组件,例如?

我的Chrome扩展程序代码的一部分如下所示:

main.js:

chrome.contextMenus.create({
  title: "\u038F",
  contexts:["editable"],
  onclick: function(info, tab){
      chrome.tabs.sendMessage(tab.id, {action: "insertCharacter", character: '\u038F'});
  }
});

content.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
    var objField = document.activeElement;

    if (request.action == "insertCharacter"){
        insertAtCursor(objField, request.character);
    }
});

function insertAtCursor(sField, sValue){
    if (sField.selectionStart || sField.selectionStart == '0'){
        var nStart = sField.selectionStart;
        var nEnd = sField.selectionEnd;

        sField.value = sField.value.substring(0, nStart) + sValue + sField.value.substring(nEnd, sField.value.length);
        sField.selectionStart = nStart + sValue.length;
        sField.selectionEnd = nStart + sValue.length;
    }
    else {
        sField.value += sValue;
    }
}

我是否有更通用的方法来处理不同网站上的各种情况?如果没有,有没有办法专门针对Facebook,因为大多数时候我(也可能是其他人)将在Facebook上使用我的扩展程序。 (当然,让它适用于像GMail这样的电子邮件网站也会带来好处。)

1 个答案:

答案 0 :(得分:0)

如果它帮助了其他人,这就是我根据wOxxOm的建议修改我的代码:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse){

    if (request.action == "insertCharacter"){
        insertAtCursor(request.character);
    }

});

function insertAtCursor(sValue){
    document.execCommand("insertText", false, sValue);
}

它比我原来的方法更紧凑,insertText自动处理选择方面。