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

问题描述

我一直在研究一个小型的Chrome扩展，其问题似乎并没有让我头脑发热，并希望有人以全新的视角来看待它。

我们的目标是创建一个Chrome扩展，使您可以选择任何网站上的文本，并显示一个选项，使用上下文菜单项将选择发送到另一个网站。

我的 manifest.json 看起来像这样：

  {
name：Context菜单搜索，
description：在新窗口中打开所选文本作为关键字，
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）; 
}）; 
 
函数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）; 
  

Plus selection.js ：

  chrome.extension.sendResponse（window.getSelection（）。toString（））; 
  

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

非常感谢。

p>

解决方案

UPDATE

文档以及所有这些都可以在没有任何内容脚本和回调的情况下更简单地完成：

  chrome.contextMenus.create（{
 title：Test％s menu item，
上下文：[selection]，
 onclick：function（info，tab）{
 sendSearch（info.selectionText）; 
} 
}）; 
  

这就是您所需要的，因为您可以使用％s


（下面的所有内容都不再需要了）

您的 getSelection（）方法不会返回选定文本，它只是将内容脚本注入到页。选定的文本稍后会在 onRequest 中收到，然后作为参数传递给回调函数中的回调函数。

所以这部分：

  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。创建（{title：title，contexts：[selection]，
onclick：sendSearch（tx）}）; 
 console.log（selection item：+ id） ; 
}）
  

但是我会摆脱 selection_callbacks 数组，因为我认为它不是必需的：

  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）需要像这样：

 onclick：function（info，tab）{
 sendSearch（info .selectionText）; 
} 
  

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.

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.

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"
}

Then background.html:

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

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

Plus 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.

Thank you very much.

解决方案

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

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

(everything below is not needed anymore)

---

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.

So this part:

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

needs to be changed to something like this:

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

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

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

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