问题
I'm basically trying to execute the code found in Chrome's Extension documentation. And that's where I'm stuck.
I'm trying to pass values from Content script >> background page (for XHR).
And the error im getting in the console is :
Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:236
Error in event handler for 'undefined': Cannot read property 'farewell' of undefined TypeError: Cannot read property 'farewell' of undefined
at chrome-extension://bccajmddlghglocgmkpkpbiankmhlfkc/js/content_script.js:23:23
at miscellaneous_bindings:281:11
at chrome.Event.dispatchToListener (event_bindings:387:21)
at chrome.Event.dispatch_ (event_bindings:373:27)
at chrome.Event.dispatch (event_bindings:393:17)
at Object.chromeHidden.Port.dispatchOnDisconnect (miscellaneous_bindings:239:27)
content_script.js looks like this :
function func1(){
$(function() {
$('.genericStreamStory').each(function(){
var link = $(this).find('.uiStreamSource a').attr('href');
$(this).find('.uiStreamFooter').find('.a1').remove();
$(this).find('.uiStreamFooter').append("<span class='a1' style='color:red !important;'> · Sample</span>");
$(this).find('.a1').click(function(){
alert('hi');
chrome.extension.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
console.log('testing');
}); //end of click handler
}); //end of 'each' function
});
}
func1();
window.setInterval("func1()", 1000);
The send message statement chrome.extension.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
is taken from the Chrome Extension Documentation.
background.js :
$(function() {
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
console.log("background");
console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});// end of onMessage listener
});
The code for onMessage Listener is taken from the Chrome documentation.
and finally, manifest.json :
{
"name": "Facebook123",
"version": "0.1",
"description": "Sample",
"content_scripts": [
{
"matches": ["https://*.facebook.com/*"],
"js": [
"/js/external/jquery.js",
"/js/content_script.js"
]
}
],
"background": {
"scripts": ["/js/background.js"]
},
"manifest_version": 2
}
Looks like the listener doesn't seem to be 'available' for handling the message sent by conrent_script.js.
The Click Handler in content_script.js is working. The 'hi' alert box pops up and the message 'testing' gets printed in the console when I click on the span 'a1'.
What could be the error?
回答1:
Open the background page's console (Where to read console messages from background.js in a Chrome extension?).
You would see an error like "ReferenceError: $ is not defined", because you're using $(function() { }); without having loaded jQuery.
You don't have to wait for the domready event in the background page, so removing $(function(){ and }); would solve the problem. Another way to get around is to include jQuery:
"background": {
"scripts": [
"/js/external/jquery.js",
"/js/background.js"
]
},
Generally, a "Port error" indicates that you're trying to send a message while no-one is listening for messages. In this case, the listener is not bound because of an error, but often you'll find that the sequence (event binding, event triggering) is badly timed and needs to be fixed.
来源：https://stackoverflow.com/questions/15517672/port-error-could-not-establish-connection-error-in-event-handler-for-undefine