我正在寻找一种在Chrome网站上选择文字的方法,并根据文字选择提供包含内容的叠加/工具提示。
之前有没有人这样做过,或者从头顶知道如何弹出工具包?
非常感谢。
答案 0 :(得分:26)
您需要做的就是收听鼠标事件:
例如,这可能会帮助您入门。需要进行更多调整,以确定是否从向下 - 向上,向右 - >向左(等所有方向)启动了选择。您可以使用以下代码作为启动:
<强> contentscript.js 强>
// Add bubble to the top of the page.
var bubbleDOM = document.createElement('div');
bubbleDOM.setAttribute('class', 'selection_bubble');
document.body.appendChild(bubbleDOM);
// Lets listen to mouseup DOM events.
document.addEventListener('mouseup', function (e) {
var selection = window.getSelection().toString();
if (selection.length > 0) {
renderBubble(e.clientX, e.clientY, selection);
}
}, false);
// Close the bubble when we click on the screen.
document.addEventListener('mousedown', function (e) {
bubbleDOM.style.visibility = 'hidden';
}, false);
// Move that bubble to the appropriate location.
function renderBubble(mouseX, mouseY, selection) {
bubbleDOM.innerHTML = selection;
bubbleDOM.style.top = mouseY + 'px';
bubbleDOM.style.left = mouseX + 'px';
bubbleDOM.style.visibility = 'visible';
}
<强> contentscript.css 强>
.selection_bubble {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
background:-webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));
}
<强>的manifest.json 强>
将匹配部分更改为您要注入这些内容脚本的域。
...
...
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["main.css"],
"js": ["main.js"],
"run_at": "document_end",
"all_frames": true
}
...
...
如果你想让它看起来像一个泡泡,Nicolas Gallagher为气泡做了一些很棒的CSS3 demos!
答案 1 :(得分:2)
我写了类似于你所问的东西。我听了用户选择文字,当有选择时,我显示了“Facebook上注意”,“定义”等链接列表。
在我开始编写它之后的一两天,我发现google将在未来的版本中添加上下文菜单支持,所以直到最近(当我转换为上下文菜单时)才触摸它。
看看代码:
http://code.google.com/p/select-actions/source/browse/trunk/select_actions.js?r=4
答案 2 :(得分:0)
如果没有人提供更好的答案,那么你可能会看看Google Dictionary扩展是如何做到的(因为它的代码被最小化会很难)。