window.getSelection 返回 undefined 或 null答案

【问题标题】：window.getSelection returning undefined or nullwindow.getSelection 返回 undefined 或 null
【发布时间】：2014-01-28 07:06:09
【问题描述】：

这可能是一个非常初学者的问题，但我要拔掉头发了，因为我不知道我做错了什么。此时，我要做的就是让选定的文本在警报或控制台中打印（用于测试）。我已确保 .toString() 方法已添加到从 window.getSelection(). 返回的对象中，无论我做什么，控制台和警报都显示为空白。谁能解释一下原因？

我在本地 Chrome 扩展程序中执行此操作。

manifest.json

{
    "manifest_version": 2,
    "name":"Testing",
    "version": "0.1",
    "icons": {
       "48":"48.png"
    },

    "background": {
        "scripts": [ "background.js" ]
    },

    "permissions":[ "tabs" ],

    "browser_action": {
        "default_icon": { "19":"img19.png" }
    }
}

JavaScript

chrome.browserAction.onClicked.addListener(function(tab) {
    var selObj = window.getSelection();
    var selectionText = selObj.toString();
    alert(selectionText);       // displays a blank alert
    console.log(selectionText); // adds a blank line in the console
});

我正在学习。提前致谢。

【问题讨论】：

您可以这样做window.getSelection().toString() 以节省一些空间，它对我来说很好。您知道，当您单击某些内容时，它可能会取消您的选择。因此，当取消选择时，getselection 应该返回空字符串
发布后，我进行了更多搜索，并遇到了一些类似的问题，说 DOM 元素只能通过注入 content.js 脚本来访问，以便在您要访问的页面上运行。 This one was helpful，所以我会尝试并添加更新。
@ΘεόφιλοςΜουρατίδης 我也尝试了这种方法，但它没有在控制台或警报中打印（只是为了尝试）。我也尝试过使用onmousedown，但我也无法让它工作。我专门在 Chrome 中工作...您能再帮我验证一下吗？
看到这个答案：stackoverflow.com/a/19100054/1507998

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

在过去 24 小时断断续续地研究之后，我终于有了一个可行的解决方案。因为我正在访问一个 DOM 元素，所以我需要注入一个内容脚本并从后台脚本来回传递信息。我还在清单中添加了activeTab 权限。

manifest.json

{
    "manifest_version": 2,
    "name":"Simple Highlighter",
    "version": "1.0",
    "icons": {
        "19":"img19.png",
        "48":"48.png"
    },

    "content_scripts": [{                   
            // "matches": ["<all_urls>"],   only used for testing
            "js":["contentscript.js"]
        }],

     "background": {
        "scripts": [ "background.js" ]
    },

    "permissions":[ "tabs", "activeTab" ],

    "description": "Highlight web text and send it to a new Google Doc",

    "browser_action": {
        "default_icon": { "19":"img19.png" },
        "default_title":"Simple Highlighter"
    }
}

background.js

chrome.browserAction.onClicked.addListener(function() {                                                 
    chrome.tabs.query({active: true, windowId: chrome.windows.WINDOW_ID_CURRENT}, function(tabs) {      
        chrome.tabs.sendMessage(tabs[0].id, {method: "getSelection"}, function(response){               
            sendServiceRequest(response.data);                                                          
        });
    });
});

function sendServiceRequest(selectedText) {                                         
    var serviceCall = 'http://www.google.com/search?q=' + selectedText;
    chrome.tabs.create({url: serviceCall});
}

contentscript.js

chrome.runtime.onMessage.addListener( 
    function(request, sender, sendResponse) { 
        if (request.method == "getSelection") 
            sendResponse({data: window.getSelection().toString()});
        else
            sendResponse({});
    }
)

很明显，这并没有按照我最初的计划去做……但是。但是，我让它传递数据，所以接下来我将致力于突出显示功能。

参考链接

Chrome Extension get selected text

about sending messages among bg.html, popup.html and contentscript.js

【讨论】：

它是否适用于 Disqus cmets？我在 Chrome 中遇到 getSelection() 失败，在 Firefox 中正常。
我没有用 Firefox 进行测试，因为它是作为 Chrome 扩展的。