时间戳

首页 > 解决方案 > 谷歌浏览器扩展 - 有没有办法在任何选项卡上为文本选择/突出显示事件添加监听器

javascript - 谷歌浏览器扩展 - 有没有办法在任何选项卡上为文本选择/突出显示事件添加监听器

问题描述

每次用户在任何选项卡上选择/突出显示某些文本时，我都会尝试触发一段代码。

当我突出显示一些文本然后单击我的扩展时，我能够运行 javascript。我已经阅读了一些 chrome api，但它们似乎都不起作用。 https://developer.chrome.com/extensions/api_index 

chrome.browserAction.onClicked.addListener(function() {
    alert(window.getSelection().toString());
});

突出显示某些文本后，我无法立即运行代码。是否有已经处理该问题的 API？

标签： javascriptgoogle-chrome-extension

解决方案

您应该只添加一个缓冲区：

店铺选择

当您谈论来自任何选项卡的选择时，您应该使用存储 api并参考选项卡 ID以供进一步使用。

document.onmouseup = function() { 
    chrome.tabs.getCurrent(function(_tabId){
        if(_tabId){
            var _SELECTION = {};
            _SELECTION[tabId] = window.getSelection().toString();
            chrome.storage.local.set(_SELECTION, function() {
                console.log('Selection saved: ', _SELECTION[tabId]);
            });
        }
    });
}

当你点击你的扩展时使用它

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.getCurrent(function(_tabId){
        if(_tabId){
            chrome.storage.local.get(_tabId, function(result) {
                alert('Selection restored: ' + result[tabId].txt);
            });
        }

    });
});

显现

不要忘记更新您的 manifest.json 以设置相应的权限

{
    ...

    "permissions": [
        "storage",
        "tabs"
    ],

    ...
}

笔记

  1. 我使用 storage.local，因为剪贴板应该保存在本地机器上，但如果你想跨机器共享它，你可以使用 storage.sync。在文档中阅读更多内容。
  2. 我会使用contextMenus。如果您突出显示文本以右键单击并执行操作，则更有意义。

推荐阅读