Выделение текста и наложение пузыря как расширение Chrome - PullRequest
Новая
       20

Выделение текста и наложение пузыря как расширение Chrome

11 голосов
/ 10 декабря 2010

Я ищу способ выделить текст на веб-сайте в Chrome и использовать всплывающую подсказку / всплывающую подсказку с содержимым в зависимости от выделения текста.

Кто-нибудь делал это раньше или знает из головы, как сделать всплывающую подсказку?

Очень ценится.

Ответы [ 3 ]

26 голосов
/ 11 декабря 2010

Все, что вам нужно сделать, это прослушивать события мыши:

  • 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
    }
...
...

Если вы хотите, чтобы стиль выглядел такпузырь, Николас Галлахер сделал несколько потрясающих CSS3 демонстраций для пузырей!

2 голосов
/ 11 декабря 2010

Я написал нечто похожее на то, о чем вы спрашиваете. Я слушал, как пользователь выбирает текст, и когда он был выделен, я отображал список ссылок для таких вещей, как «Примечание в Facebook», «Определить» и т. Д.

Через день или два после того, как я начал писать, я обнаружил, что Google собирается добавить поддержку контекстного меню в будущем выпуске, поэтому я не касался этого до недавнего времени (когда я преобразовал в контекстные меню).

Посмотрите на код:

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

0 голосов
/ 10 декабря 2010

Если никто не дает лучшего ответа, вы можете посмотреть, как это делает расширение Google Dictionary (это будет сложно, так как его код свернут).

...