Question

上下文：

使用JavaScript编写Google Chrome扩展程序
使用上下文菜单库
用户应该可以右键单击文本框，选择chrome扩展名，选择＆＃34;插入文本＆＃34;，然后该文本将插入到所选文本框中。
我使用纯javascript，请不要使用jquery或AJAX。
我无法编辑HTML页面，因为它可能是包含HTML文本框或可编辑字段的任何通用网页。

我到目前为止的代码：

//the menu item
    var menuItem_insert = chrome.contextMenus.create({"title": "Insert Timestamp", "contexts":[context], "onclick:": insertTimestamp}); 

//the onclick
    function insertTimestamp(info, tab) {
      //if info.editable is true then
      alert(info.editable); //for debugging

    //CODE GOES HERE: need to insert timestamp here
    }

问题：如何将文本插入到我可能没有＆＃34; ID＆＃34;为？

Answer 1

通过document.activeElement，您可以引用当前的活动元素：

document.activeElement.value = 'My value';

应该输入＆＃34;我的价值＆＃34;在调用时选择的输入文本中的字符串。

不幸的是，在您的情况下，您希望在单击按钮后发生这种情况，因此您的活动元素将在点击时成为您的按钮。因此，您可以找到解决方法来定义文本输入的元素onblur，以便单击该按钮将引用该输入文本。所以这是HTML

<div>
  <input type="text" onblur="trackElement(this)" />
  <button onclick="test()">
  Test
  </button>
</div>

这是JS：

var myTxt = null;

function test() {
    if (myTxt != null) {
    myTxt.value = 'my value';
  }
}

function trackElement(el) {
    console.log(el);
    myTxt = el;
}

https://jsfiddle.net/2459g8z5/4/

Answer 2

avril alejandro答案很好，这是解决问题的另一种方法

逻辑是，当用户单击您的上下文菜单项时，菜单将消失并且焦点返回到您需要它的位置，右键单击开始的原始元素（如果用户在某处单击，也可以从该元素中的任何点开始）在现有文本的中间）
您需要做的就是模拟复制/粘贴操作。

所以，在后台脚本中：

在您的onClicked听众中创建textarea
用要插入的值填充它（在此示例中为日期字符串）
关注它并选择它
使用document.execCommand('Copy')将taxarea值放入剪贴板
如果从iframe开始点击，请确保仅定位该框架，以避免多个脚本插入和错误
将脚本注入发件人标签（您拥有onClicked听众的所有信息）
注入脚本只会做一件事，粘贴剪贴板document.execCommand('paste')

<强> background.js

chrome.contextMenus.onClicked.addListener(function(info, tab) {
    var tArea = document.createElement('textarea'), _frame = null, date = new Date();
    document.body.appendChild(tArea);
    tArea.value = date.toLocaleString();
    tArea.focus();
    tArea.select();
    document.execCommand('copy');

    if(info.frameId) _frame = info.frameId;

    chrome.tabs.executeScript(tab.id, {frameId: _frame, matchAboutBlank: true, code: 
        "document.execCommand('paste');"
    }, function() {
        if (chrome.runtime.lastError) console.log(chrome.runtime.lastError);
        document.body.removeChild(tArea);
    });     
});

清单中的

添加"clipboardWrite", "clipboardRead", "activeTab"权限

我在Opera notes extension中使用此逻辑我从未见过有人使用过这个技巧，而且非常简单，加上它会消除所有麻烦，目标是正确的元素，选择，范围，富文本编辑等等。

Answer 3

according this reply
您可以使用mousedown事件侦听器和已单击的存储元素注入内容脚本：

的manifest.json

..
"permissions": ["contextMenus"],
"background": {
  "scripts": ["./bg.js"]
},
"content_scripts": [{
  "js": ["./content.js"],
  "matches": ["<all_urls>", "http://*/*" , "https://*/*", "file:///"],
  "run_at": "document_end"
}],
"manifest_version": 2
..

background.js

function mycallback(info, tab) {
  if (info.editable) {
    chrome.tabs.sendMessage(tab.id, {
      "text": "TEXT GOES HERE"
    });
  }
}
chrome.contextMenus.create({
  title: "Insert Timestamp",
  contexts: ["editable"],
  onclick: mycallback
});

content.js

var clickedEl = null;
document.addEventListener("mousedown", function (event) {
  //right click
  if (event.button == 2) {
    clickedEl = event.target;
  }
}, true);
chrome.runtime.onMessage.addListener(function (request) {
  clickedEl.value = request.text;
});

如何在没有ID的JavaScript中将文本插入选定的文本框？

3 个答案: