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});
  }
}

请注意，我们直接发送到调用了上下文菜单的帧，这在一般情况下（可能在您自己的情况下）是必需的，而在清单文件.json中声明的所有iframe中都运行内容脚本：

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

解决方案2。

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

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)})`,
    });
  }
}

并在无需用户确认安装（documentation）的manifest.json中添加权限：

"permissions": ["activeTab"]

Chrome extesnion使用上下文菜单将文本添加至“可编辑”

1 个答案: