マウスで選択した部分の文字列を取得する方法

• 概要
• 環境
• manifest.json
• main.js
• 動作確認
• おまけ (アンカーテキストの URL を取得する)
• 最後に
• 参考サイト

概要

Firefox の Webextension でマウスで選択した部分の文字列の情報を取得する方法を紹介します
基本は選択 -> 右クリックの流れなのでコンテキストメニューから取得するのが早いです

環境

• macOS 10.13.6
• Firefox 62.0

manifest.json

• vim manifest.json

{
  "manifest_version": 2,
  "name": "Selected text",
  "version": "1.0",
  "description": "Show selected text in console.log",
  "icons": {
    "48": "icons/border-48.png"
  },
  "background": {
    "scripts": ["main.js"]
  },
  "permissions": [
    "menus"
  ]
}

コンテキストメニューを使うので permissions に menus を追加します

main.js

• vim main.js

browser.menus.create({
  id: "select-text",
  title: "Show select text",
  contexts: ["all"]
});

browser.menus.onClicked.addListener((info, tab) => {
  switch (info.menuItemId) {
    case "select-text":
      if (info.selectionText !== undefined) {
        console.log(info.selectionText);
      }
      break;
  }
});

info.selectionText これで取得できます
info は OnClickData のオブジェクトです
selectionText 以外にも様々なプロパティがあります

動作確認

about:debugging から extension をインストールして動作確認してみましょう
文字列を選択してコンテキストメニューから追加した項目をクリックすると文字列が console.log で表示されると思います

cosole.log で表示するだけなのでデバッグからコンソール画面を表示しておいてください

おまけ (アンカーテキストの URL を取得する)

info から linkUrl を参照するだけで OK です

if (info.linkUrl !== undefined) {
  url = info.linkUrl;
}

最後に

Firefox の Webextension でマウスで選択した部分の文字列を取得してみました
コンテキストメニューのクリックイベントを拾うと簡単に取得できます

むしろそれ以外で取得する方法がわかりませんでした
ユースケースを考えるとそれ以外で必要な場面は少ないので API 的にもそうしているのかもしれません

参考サイト

• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/OnClickData