如何選擇右擊的單詞？

Question

我有以下代碼。 這就是它的作用。 通過單擊和拖動來突出顯示/選擇網頁上的某些文本時，右鍵單擊以查看上下文菜單，並且單擊菜單項時，突出顯示的文本將顯示在警報框中。 我想修改此代碼，以便用戶不必通過單擊和拖動來突出顯示任何文本。 他們要做的就是右鍵單擊一個單詞，然后選擇上下文菜單項。 他們右鍵單擊的單詞/文本應顯示為警報。

let contextMenuItem = {
    "id": "helloWorld",
    "title": "Hello World",
    "contexts": ["selection"]
};

chrome.contextMenus.removeAll(function() {
    chrome.contextMenus.create(contextMenuItem);
  });

chrome.contextMenus.onClicked.addListener(function(clickData) {
        let inputString = clickData.selectionText;
        alert(inputString);
})

Answer 1

首先，擴展具有“嚴格”權限模型。 當您授予contextMenus權限時，您將限於以下上下文：

“所有”，“頁面”，“框架”，“選擇”，“鏈接”，“可編輯”，“圖像”，“視頻”，“音頻”，“啟動器”，“瀏覽器動作”或“ page_action”

錯誤的用戶體驗

如果它具有“單詞”或什至“文本”上下文，則將創建不一致的用戶體驗。 用戶不熟悉在Web瀏覽器中對文本執行右鍵單擊操作。

如果您想采取這種行動，則需要引入一個內容腳本，以添加鼠標事件以使用JavaScript Selection API “自動”選擇該單詞。 如果需要，您需要向擴展程序公開更多“權限”以支持這種體驗。 用戶可能不喜歡這樣。

例

如果這是擴展程序所需的體驗，只需創建一個內容腳本即可自動選擇該單詞。 這樣的事情將起作用，它將從鼠標位置創建插入符號范圍，並將其選擇修改為該單詞。 請注意，在權限內，我剛剛啟用了google.com，這是內容腳本將插入的位置。

contentscript.js

document.addEventListener('mouseup', (e) => {
    if (e.button !== 2) {
        return
    }

    const selection = window.getSelection()
    selection.removeAllRanges()

    const range = document.caretRangeFromPoint(e.clientX, e.clientY)
    range.expand('word')

    selection.addRange(range)
});

background.js

const menu = chrome.contextMenus.create({
    'id': 'helloWorld',
    'title': 'Hello "%s"',
    'contexts': ['selection']
})

chrome.contextMenus.onClicked.addListener((clickData) => {
    const inputString = clickData.selectionText
    console.log(inputString)
});

manifest.json

{
  "name": "contextMenus",
  "version": "1.0",
  "minimum_chrome_version": "35.0",
  "manifest_version": 2,
  "permissions": [
    "contextMenus"
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": ["https://*.google.com/*"],
      "js": ["contentscript.js"]
    }
  ]
}