Chrome Extension: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist

Question

Recently, it is reported that the context menu of my app is vanished. If you remove the app and reinstall it, it works. But the vanishment happens again.

I found an error. I'm not sure if the error causes the vanishment of the context menu. But I'd like to fix this matter, because all I found is this.

This app shows texts you select in a page. When you select texts in an ordinaly page and click browser action button, it works without error. But if you try it on Google Docs, you will get error "Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist".

I'm afraid I don't know what to do with this. And I might have two problems. It'll be great help if you could give me some advice.

[manifest.js]

{
    "manifest_version": 2,
    "name": "Test Chrome Extension",
    "short_name": "Test",
    "version": "1.0",
    "description": "This is a test.",
    "icons": {
        "128": "128.png"
    },
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["googleDocsUtil.js", "content_scripts.js"]
    }],
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "browser_action": {
        "default_icon": {
            "48": "48.png"
        },
        "default_title": "Test Chrome Extension"
    },
    "permissions": [
        "contextMenus",
        "tabs",
        "background",
        "http://*/*",
        "https://*/*"
    ]
}

[background.js]

chrome.contextMenus.create({
    type: 'normal',
    id: 'testchromeextension',
    title: 'Test Chrome Extension',
    contexts:['selection']
});

chrome.contextMenus.onClicked.addListener(function(info,tab){
    if( info.menuItemId == 'testchromeextension' ){
        var selectedText = info.selectionText.replace(/ /g, "\n");
        doSomething(selectedText);
    }
});

chrome.browserAction.onClicked.addListener( function(tab) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {method: "getSelection"}, function(response) {
            doSomething(response.data);
        });
    });
});

function doSomething(selectedText) {
    console.log(selectedText);
}

[content_scripts.js]

chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
    if (request.method == "getSelection") {
        var post_val = window.getSelection().toString();
        if ( !post_val ) {
            var googleDocument = googleDocsUtil.getGoogleDocument();
            post_val = googleDocument.selectedText;
        }
        sendResponse({data: post_val});
    }
});

Answer 1

I believe this error is caused when you update the local version of an extension and then try to use the extension with its old/not-updated source code.

The fix: after you reload your local extension at chrome://extensions/, make sure you refresh the page you're using the extension on. You should no longer see the error.