Chrome瀏覽器擴展上下文菜單 - 修改文本框選擇

我正在製作一個谷歌瀏覽器擴展程序，它具有快速生成文本顛倒，倒置，彩虹等文本的工具，並使瀏覽器能夠完美運行這些工具，但我也想要一個上下文菜單，允許用戶在文本框/區域選擇上使用這些工具中的一種。由於學校假期，我有很多空閒時間，但我無法想象如何去做，也無法在Google或Stack Overflow上找到答案。我想出瞭如何創建一個上下文菜單，我只需要知道如何從後臺腳本中修改選定的文本。Chrome瀏覽器擴展上下文菜單 - 修改文本框選擇

TL; DR：如何使用上下文菜單修改文本框/區域中的選定文本？

（我也使用jQuery）。

來源

2013-09-24 Nathan Piercy

我猜你需要使用jQuery caret plugin。

代碼可能看起來像下面（未經測試）

replaceselector.js：

function replaceSelection(selector, replaceText) { 
    var input = $(selector); 
    var text = input.text(); 
    input.text(text.substr(0, input.caret().start) + replaceText + text.substr(input.caret().end); 
}

進樣content scripts到目標選項卡，然後從你的背景頁面中調用EXECSCRIPT

chrome.tabs.executeScript(tabid, {file: "jquery.min.js"} function() { 
    chrome.tabs.executeScript(tabid, {file: "jquery.caret.1.02.min.js"} function() { 
     chrome.tabs.executeScript(tabid, {file: "replaceSelector.js"} function() { 
      chrome.tabs.executeScript(tabid, {code: "replaceSelection('#myInputBox', 'Replace String');"}); 
     }); 
    }); 
});

來源

2013-09-24 07:35:08 Andrey

謝謝，但基本上是我想知道的是如何從後臺腳本中做到這一點。我有一段時間沒有真正開發Chrome擴展，我從來沒有做過修改當前頁面的擴展。我是否需要將代碼注入頁面，或者是從後臺腳本訪問頁面DOM的某種方式？ –

用內容腳本執行示例更新了我的答案 – Andrey

Chrome瀏覽器擴展上下文菜單 - 修改文本框選擇

回答

相關問題