文本选择和气泡叠加作为 Chrome 扩展

发布于 2024-10-06 21:12:49 字数 101 浏览 5 评论 0原文

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

有没有人以前做过这个或者知道如何让工具栏弹出？

非常感谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

提笔落墨 2024-10-13 21:12:49

您需要做的就是监听鼠标事件：

mousedown：隐藏气泡。
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

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

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

如果你想让它看起来像一个气泡，Nicolas Gallagher 做了一些很棒的 CSS3 demos< /a> 泡泡！

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!

回复收藏 0 原文