2

I'm building a chrome extension that takes some text the user selects in a web page and then displays it in a popup when a button is clicked. I'm using chrome.runtime API to do this.

But when chrome.runtime.sendMessage executes I get an undefined response which results in the following error: TypeError: Cannot read property 'data' of undefined.

The code:

function pasteSelection() {
    chrome.runtime.sendMessage( {"method": "getSelection"}, function(response) {
        var text = document.getElementById('text');
        text.innerHTML = response.data;
    });
}

window.onload = function() {
    document.getElementById("myButton").addEventListener("click", pasteSelection);
}

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

I was trying to follow the instructions of this answer. Some of the methods the author uses here are deprecated.

UPDATE:

I've separated the code in two files and made some minor changes, and I'm showing my manifest.json file as well.

popup.js

function pasteSelection() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        var currTab = tabs[0];
        var tab_id = currTab.id;
        chrome.tabs.sendMessage(tab_id, {method: "getSelection"}, function(response) {
            var text = document.getElementById('text');
            text.innerHTML = response.data;
        });
    });
}

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById("myButton").addEventListener("click", pasteSelection);
});

selection.js

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

manifest.json

   {
    "manifest_version": 2,
    "name": "Code snippets",
    "description": "Extension that enables users to save and tag code snippets and easily navigate through them",
    "version": "1.0",
    "browser_action": {
        "default_title": "Code Snippets",
        "default_popup": "interface.html"
    },
    "content_scripts": [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["selection.js"]
        }
    ],
    "permissions": [
        "tabs"
    ]
}
tropez
  • 138
  • 3
  • 13
  • onMessage.addListener should be inside a separate content script loaded on the web page. – wOxxOm Feb 01 '18 at 17:09
  • Just did that, but the same problem persists – tropez Feb 01 '18 at 17:22
  • I guess you didn't reload your extension on chrome://extensions page or didn't reload the web page or your declaration in manifest.json is incorrect. – wOxxOm Feb 01 '18 at 17:25
  • I reloaded the extension. Also, I've just updated the question with how the code is structured right now. I keep getting the same error. The response in pasteSelection() is undefined somehow – tropez Feb 02 '18 at 02:34
  • Background page is a separate hidden page, it's not a web page, it's not related to web pages at all. You need a content script. – wOxxOm Feb 02 '18 at 03:15
  • Ok. I've added selection.js as a content script. Also, I'm now sending the message in popup.js as chrome.tabs.sendMessage instead of runtime.sendMessage. But the same problem persists – tropez Feb 02 '18 at 13:25
  • Add a console.log to verify that the onMessage event handler gets triggered at all on your page and go from there. – holmberd Feb 02 '18 at 16:18

0 Answers0