上下文菜单 chrome 扩展中的文本选择和显示 [英] Text selection and display in context menu chrome extension

问题描述

我一直在开发一个小型 Chrome 扩展程序，但遇到了一个问题，我似乎无法理解，希望有人能以全新的视角看待它.

I have been working on a small Chrome extension with a problem I cant seem to get my head around and would appreciate someone to look at it with a fresh perspective.

目标是创建一个 chrome 扩展程序，使您能够选择任何给定网站上的文本，并显示一个选项，以使用上下文菜单项将选择发送到另一个网站.

The goal is to create a chrome extension which enables you to select text on any given website and displays an option to send the selection to another website using a contextmenu item.

我的 ma​​nifest.json 看起来像这样:

My manifest.json looks like this:

{
"name": "Context Menu Search",
"description": "Opens the selected text as keyword in a new window",
"version": "0.1",
"permissions": ["contextMenus"],
"background_page": "background.html"
}

然后background.html:

<script src="rightclick.js"></script>

和rightclick.js:

var selection_callbacks = []; 
 function getSelection(callback) { 
 selection_callbacks.push(callback); 
    chrome.tabs.executeScript(null, { file:"selection.js" }); 
  }; 
  chrome.extension.onRequest.addListener(function (request) { 
    var callback = selection_callbacks.shift(); 
    callback(request); 
  });

function sendSearch(selectedText) {
var serviceCall = 'http://www.google.com/search?q=' + selectedText;
chrome.tabs.create({url: serviceCall});
}
var tx = getSelection();
var title = "Test '" + tx + "' menu item";
var id = chrome.contextMenus.create({"title": title, "contexts":[selection],
                                   "onclick": sendSearch(tx)});
console.log("selection item:" + id);

加上selection.js:

chrome.extension.sendResponse(window.getSelection().toString());

到目前为止，上下文菜单创建工作正常，但所选文本根本不显示.如果有人对如何解决此问题以及简化脚本有任何建议，我将不胜感激.

So far the context menu creation works fine, but the selected text is not displayed at all. If anyone has any suggestions on how to solve this problem as well as simplify the script, I would appreciate your input.

非常感谢.

推荐答案

UPDATE

我刚刚查看了文档，所有这些都可以做得更多更简单，没有任何内容脚本和回调:

I just looked at the docs and all this can be done much more simpler without any content scripts and callbacks:

chrome.contextMenus.create({
    title: "Test %s menu item", 
    contexts:["selection"], 
    onclick: function(info, tab) {
        sendSearch(info.selectionText);
    }
});

这就是您所需要的，因为您可以在菜单标题中使用 %s 来获取选定的文本.

That's all you need, because you can use %s in menu title to get selected text.

(不再需要以下所有内容)

您的 getSelection() 方法不会返回选定的文本，它只是将内容脚本注入页面.选定的文本稍后在 onRequest 中接收，然后作为参数从回调数组传递给回调函数.

Your getSelection() method doesn't return selected text, it just injects a content script to a page. Selected text is received sometime later in onRequest and then passed to a callback function from your callback array as a parameter.

所以这部分:

var tx = getSelection();
var title = "Test '" + tx + "' menu item";
var id = chrome.contextMenus.create({"title": title, "contexts":[selection],
                                   "onclick": sendSearch(tx)});
console.log("selection item:" + id);

需要改成这样:

getSelection(function(tx) { 
    var title = "Test '" + tx + "' menu item";
    var id = chrome.contextMenus.create({"title": title, "contexts":["selection"],
                                       "onclick": sendSearch(tx)});
    console.log("selection item:" + id);
})

但我会完全摆脱那个 selection_callbacks 数组，因为我认为它不需要:

But I would get rid of that selection_callbacks array altogether as I think it is not needed:

chrome.extension.onRequest.addListener(function (request) { 
    var tx = request;
    var title = "Test '" + tx + "' menu item";
    var id = chrome.contextMenus.create({"title": title, "contexts":["selection"],
                                       "onclick": sendSearch(tx)});
    console.log("selection item:" + id);
});

还要注意"contexts":[selection]需要是"contexts":["selection"]，而"onclick":sendSearch(tx) 应该是这样的:

Also note that "contexts":[selection] needs to be "contexts":["selection"], and "onclick": sendSearch(tx) needs to be something like this instead:

"onclick": function(info, tab) {
    sendSearch(info.selectionText);
}

这篇关于上下文菜单 chrome 扩展中的文本选择和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！