[英]How to replace input field selected text with Chrome extension context menu?
I am looking for a simple solution to change input field value with context menu trigger. 我正在寻找一种使用上下文菜单触发器更改输入字段值的简单解决方案。
Let's say changing to bar
will be enough, I'll try to add some processing later. 假设更改为
bar
就足够了,稍后我将尝试添加一些处理。
This is how it should work 这应该是这样的
manifest.json: manifest.json:
{
"manifest_version": 2,
"background" : { "scripts": ["background.js"] },
"permissions": [ "contextMenus", "http://*/*", "https://*/*" ],
"name": "test plugin",
"version": "0.1"
}
background.js: background.js:
function getClickHandler() {
//magic here
};
chrome.contextMenus.create({
"title" : "change to 'bar'",
"type" : "normal",
"contexts" : ["editable"],
"onclick" : getClickHandler()
});
The basic idea would be 基本思想是
contextmenu
event in content scripts and record e.target
(This is needed because we don't know the actual DOM node for chrome context menu api, see Issue 39507 ) contextmenu
事件并记录e.target
(这是必需的,因为我们不知道chrome上下文菜单api的实际DOM节点,请参见问题39507 ) document.activeElement
, since input elements get focused upon click document.activeElement
,因为输入元素专注于单击 getClickHandler
is triggered getClickHandler
时向内容脚本发送消息 "bar"
"bar"
Sample code: 样例代码:
manifest.json 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 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 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
});
As @Xan has mentioned in the comments, if you just want to update <input>
field, then using input.value = xxx
is ok; 正如@Xan在评论中提到的那样,如果您只想更新
<input>
字段,则可以使用input.value = xxx
; however if you would like to manipulate arbitrary editable element, see Is there a flexible way to modify the contents of an editable element? 但是,如果您想操纵任意可编辑元素,请参见是否有灵活的方法来修改可编辑元素的内容? for more ideas.
了解更多想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.