14

Chrome の Web サイトでテキストを選択し、テキストの選択に応じてコンテンツをオーバーレイ/ツールチップ ポップする方法を探しています。

ツールリップをポップアップさせる方法を頭のてっぺんから知っている人はいますか?

とても有難い。

4

3 に答える 3

33

必要なことは、マウス イベントをリッスンすることだけです。

  • 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));
}

マニフェスト.json

一致する部分を、これらのコンテンツ スクリプトを挿入するドメインに変更します。

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

泡のようにスタイルを設定したい場合は、Nicolas Gallagher が泡の素晴らしい CSS3デモを作成しました。

于 2010-12-11T01:50:58.287 に答える
2

お尋ねの内容と同じようなことを書きました。ユーザーがテキストを選択するのを聞いて、選択があると、「Facebook のメモ」、「定義」などのリンクのリストを表示しました。

書き始めてから 1 日か 2 日後、Google が将来のリリースでコンテキスト メニューのサポートを追加する予定であることがわかったので、最近 (コンテキスト メニューに変換したとき) までこれには触れませんでした。

コードを見てください：

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

于 2010-12-11T01:58:44.163 に答える
0

誰もより良い答えを提供しない場合は、 Google Dictionary拡張機能がどのようにそれを行うかを調べることができます(コードが最小化されているため、難しいでしょう)。

于 2010-12-10T16:56:55.717 に答える