Выбор текста и наложение пузырьков в качестве расширения Chrome

Ответ 1

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

• 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 для пузырьков!

Ответ 2

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

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

Взгляните на код:

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

Ответ 3

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