javascript - 如何用 Chrome 扩展上下文菜单替换输入字段选定的文本？

Question

我正在寻找一个简单的解决方案来使用上下文菜单触发器更改输入字段值。

假设更改为 bar 就足够了，稍后我会尝试添加一些处理。

This is how it should work

manifest.json:

{
  "manifest_version": 2,
  "background" : { "scripts": ["background.js"] },
  "permissions": [ "contextMenus", "http://*/*", "https://*/*" ],
  "name": "test plugin",
  "version": "0.1"
}

背景.js:

function getClickHandler() {
  //magic here
};

chrome.contextMenus.create({
  "title" : "change to 'bar'",
  "type" : "normal",
  "contexts" : ["editable"],
  "onclick" : getClickHandler()
});

Answer 1

基本思想是

1. 听contextmenu内容脚本和记录中的事件 e.target (这是必需的，因为我们不知道 chrome 上下文菜单 api 的实际 DOM 节点，请参阅 Issue 39507 ) 我们可以直接使用 document.activeElement ，因为输入元素在点击时获得焦点
2. 在后台页面中，当 getClickHandler 时向内容脚本发送消息被触发
3. 在内容脚本中，将 target.value 替换为 "bar"

示例代码:

list .json

{
  "manifest_version": 2,
  "background" : { "scripts": ["background.js"] },
  "permissions": [ "contextMenus", "http://*/*", "https://*/*" ],
  "name": "test plugin",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "content.js"
      ],
      "all_frames": true
    }
  ]
}

内容.js

chrome.runtime.onMessage.addListener(function (request) {
    replaceSelectedText(document.activeElement, request.text);
});

function replaceSelectedText(elem, text) {
    var start = elem.selectionStart;
    var end = elem.selectionEnd;
    elem.value = elem.value.slice(0, start) + text + elem.value.substr(end);
    elem.selectionStart = start + text.length;
    elem.selectionEnd = elem.selectionStart;
}

背景.js

function getClickHandler(info, tab) {
    chrome.tabs.sendMessage(tab.id, {text: "bar"});
};

chrome.contextMenus.create({
  "title" : "change to 'bar'",
  "type" : "normal",
  "contexts" : ["editable"],
  "onclick" : getClickHandler
});

已更新

正如 @Xan 在评论中提到的，如果您只想更新 <input>字段，然后使用 input.value = xxx没问题；但是，如果您想操作任意可编辑元素，请参阅 Is there a flexible way to modify the contents of an editable element?获取更多想法。