Chrome扩展的文本选择和气泡覆盖

Question

我正在寻找一种方法来选择Chrome中网站上的文本，并根据文本选择弹出包含内容的工具提示。

有没有人做过之前或从他们的头顶知道如何使toolip弹出？

非常感谢。

Answer 1

所有你需要做的是侦听鼠标事件：

• 鼠标按下：隐藏的泡沫。
• mouseup：显示气泡。

例如，这可能会帮助您开始。需要更多的调整，以确定是否从下 - >上，右 - >左（等）（所有方向）启动了选择。您可以使用下面的代码作为启动：

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的

改变比赛部分到您想要注入的域ct这些内容脚本。

... 
... 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
     "css": ["main.css"], 
     "js": ["main.js"], 
     "run_at": "document_end", 
     "all_frames": true 
    } 
... 
... 

如果你想它的样式看起来像一个泡沫，尼古拉斯·加拉格尔没有气泡一些真棒CSS3 demos！

Answer 2

如果没有人提供更好的答案，那么你可以看看如何Google Dictionary扩展它（它会很难，因为它的代码被最小化）。

Answer 3

我写了类似于你所问的内容。我听取用户选择文本，当有一个选择，我显示了“Facebook上的注意事项”，“定义”等的链接列表。

我开始写它后的一两天，我发现谷歌将在未来的版本中添加上下文菜单支持，所以直到最近（当我转换到上下文菜单时）我都没有触及它。

的代码看看：

http://code.google.com/p/select-actions/source/browse/trunk/select_actions.js?r=4