如何用Chrome擴展程序上下文菜單替換輸入字段選擇的文本？

Question

我正在尋找一種使用上下文菜單觸發器更改輸入字段值的簡單解決方案。

假設更改為bar就足夠了，稍后我將嘗試添加一些處理。

這應該是這樣的

manifest.json：

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

background.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節點，請參見問題39507 ） 我們可以直接使用document.activeElement ，因為輸入元素專注於單擊
2. 在后台頁面中，在觸發getClickHandler時向內容腳本發送消息
3. 在內容腳本中，將target.value替換為"bar"

樣例代碼：

manifest.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
    }
  ]
}

content.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;
}

background.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 ; 但是，如果您想操縱任意可編輯元素，請參見是否有靈活的方法來修改可編輯元素的內容？ 了解更多想法。