javascript - Chrome 扩展程序将文本添加到可编辑的上下文菜单中

Question

我正在尝试使用上下文菜单将文本添加到可编辑字段。

I tried to follow this SO but I cannot seem to get it to add the text to the field.

这是我的内容，看起来很有道理。我相信它正在添加后台脚本正在寻找的上下文。

var clickedEl = null;

document.addEventListener("mousedown", function(event){
    //right click
    if(event.button == 2) {
        clickedEl = event.target;
    }
}, true);

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request == "getClickedEl") {
        sendResponse({value: clickedEl.value});
    }
});

这是我的背景脚本。这是我不确定我是否做得正确的部分。

function onClickHandler(info, tab) {
  if (info.menuItemId.indexOf("context") > -1) {
    var type = info.menuItemId.replace('context', '');
    theLog = type;

    function mycallback(info, tab) {
        chrome.tabs.sendMessage(tab.id, "getClickedEl", function(clickedEl) {
            elt.value = theLog.value;
        });
    }

  }
}

Answer 1

你的后台脚本运行在一个单独的隐藏页面中，有自己的URL和DOM，无法直接访问网页，参见 architecture overview在文档中。只需将文本发送到内容脚本，然后该脚本将使用 document.execCommand 将值插入到事件元素中。

解决方案 1。

内容脚本:

chrome.runtime.onMessage.addListener(msg => {
  document.execCommand('insertText', false, msg);
});

后台脚本:

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId.includes('context')) {
    const text = info.menuItemId.replace('context', '');
    chrome.tabs.sendMessage(tab.id, text, {frameId: info.frameId || 0});
  }
}

请注意，我们直接发送到调用上下文菜单的框架，这在一般情况下是必需的(可能不是您的情况)，内容脚本在所有 iframe 中运行，并在 manifest.json 中声明:

"content_scripts": [{
  "matches": ["<all_urls>"],
  "all_frames": true,
  "match_about_blank": true,
  "js": ["content.js"]
}]

<小时/>

解决方案 2。

但是，如果这是内容脚本的唯一功能，最好不要在manifest.json中声明它，而是在后台脚本中动态注入(inject):

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId.includes('context')) {
    const text = info.menuItemId.replace('context', '');
    chrome.tabs.executeScript(tab.id, {
      frameId: info.frameId || 0,
      matchAboutBlank: true,
      code: `document.execCommand('insertText', false, ${JSON.stringify(text)})`,
    });
  }
}

并在manifest.json中添加不需要用户确认安装的权限( documentation ):

"permissions": ["activeTab"]