文字选择和气泡覆盖作为Chrome扩展程序 [英] Text selection and bubble overlay as Chrome extension

问题描述

我正在寻找一种方法来在Chrome中选择网站上的文本，并根据文本选择来显示叠加/工具提示内容。

有没有人完成这之前或从头顶上知道如何使toolip弹出？

非常感谢。

解决方案

您只需监听鼠标事件即可：

• mousedown：隐藏泡泡。


• mouseup：显示泡泡。

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

contentscript.js

  //将气泡添加到页面的顶部。 
 var bubbleDOM = document.createElement（'div'）; 
 bubbleDOM.setAttribute（'class'，'selection_bubble'）; 
 document.body.appendChild（bubbleDOM）; 
 
 //让我们监听mouseup DOM事件。 
 document.addEventListener（'mouseup'，function（e）{
 var selection = window.getSelection（）。toString（）; $ b $ if（selection.length> 0）{
 renderBubble（e.clientX，e.clientY，selection）; 
} 
}，false）; 
 
 
 //点击屏幕时关闭气泡。 
 document.addEventListener（'mousedown'，function（e）{
 bubbleDOM.style.visibility ='hidden'; 
}，false）; 
 
 //将该气泡移动到适当的位置。 
函数renderBubble（mouseX，mouseY，selection）{
 bubbleDOM.innerHTML =选择; 
 bubbleDOM.style.top = mouseY +'px'; 
 bubbleDOM.style.left = mouseX +'px'; 
 bubbleDOM.style.visibility ='visible'; 
} 
  

contentscript.css

  .selection_bubble {
 visibility：hidden; 
位置：绝对; 
 top：0; 
剩下：0; 
 background：-webkit-gradient（线性，左上角，左下角，从（＃2e88c4）到（＃075698））; 
} 
  

manifest.json

将匹配部分更改为您要注入这些内容脚本的域。

  .. 。
 ... 
content_scripts：[
 {
matches：[http：// * / *]，
css： [main.css]，
js：[main.js]，
run_at：document_end，
all_frames：true 
} 
 ... 
 ... 
  

如果您想将其设置为看起来像泡沫，Nicolas Gallagher为泡泡做了一些非常棒的CSS3 演示！

I am looking for a way to select text on a website in Chrome and have a overlay/tooltip pop with content depending on the text selection.

Has anyone done this before or knows from the top of their heads how to make the toolip pop-up?

Much appreciated.

解决方案

All you need to do is listen for mouse events:

• mousedown: to hide the bubble.
• mouseup: to show the bubble.

For example, this might help you get started. More tweaks are needed, to figure out if you initiated the selection from down->up, right->left, etc (all directions). You can use the following code as a startup:

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

Change the matches portion to the domain you want to inject these content scripts.

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

If you want to style it to look like a bubble, Nicolas Gallagher did some awesome CSS3 demos for bubbles!

这篇关于文字选择和气泡覆盖作为Chrome扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！