I'm creating an extension for Firefox and Chrome using the WebExtensions API. I have a content script that runs on every page and a GUI in a DevTools panel. Every time the user clicks an element, the content script needs to pass a message to update the GUI in the panel. The code in the content script seems to be working, and looks like this:
content_script.js
document.addEventListener('click', (e) =>
console.log('content_scripts interpreted click on ', e);
browser.runtime.sendMessage({"target": e.target.toString()});
});
The panel is supposed to listen for these click events and update the GUI. That code looks like this:
panel.js
function notifyOnClick(message) {
console.log('extension heard click', message);
let clickTargetToString = message.target;
$('#menu').append(`<p>Clicked ${clickTargetToString}</p>`);
}
browser.runtime.onMessage.addListener(notifyOnClick);
However, every time I click within the document, the "interpreted click" line prints, and an error appears in the panel's console. It says "Error: Could not establish connection. Receiving end does not exist."
I don't know how this could be the case, since I've clearly subscribed to messages on the receiving end. Please help explain this error - thanks!
You may refer with this thread. The suggested action is to use a background pages instead of a background script. Also this link states your error means that there is no corresponding listener for that message. In some circumstances this may be expected but obviously most of the time it is an unexpected error. Make sure you are adding the content script and sending the messages from the same namespace.
Related
I am writing a script to check whether Facebook user is connected to our site, and this script is in the header file, so it will be called repeatedly when we calling another page, what I need is how to make this script fires only in status changed condition, may I know how to do that? the script I am using is as below:-
FB.Event.subscribe('auth.authResponseChange', function(response) {
//Attaches an handler to an event
});
'auth.authResponseChange' - fired when the authResponse changes
I think it is not working correctly, this command still fires when we refresh the page even the user status is remaining the same condition. Can anyone help me to solve this problem? thanks all and have a nice dream.
The FB object (the one on which you call FB.login(), FB.api() etc.) does not live between page loads. On each page load it is recreated, and at some point during each page load it receives an authResponse for the first time. From the POV of the FB object this is a change from unknown to known, so it fires the change event.
I've been trying to figure this out from the docs and samples but there just isn't enough there yet (or maybe I'm missing something?).
I want to create a devtools panel but I still want access to the inspected window's dom like I get in content scripts. Right now my option is eval something in the context of the inspected window, but i would really rather not do that if I can avoid it. If I can just use a content script along with my devtools page/scripts that would be idea, but it doesn't seem to be working like I expect that it should - i can't seem to use the background page to send messages between my devtools page and my content script.
Also, is there a way to get those cool dom subtrees to display like they do in the elements panel or in the console along with the awesome hover/highlight feature?
UPDATE
So I can connect to the content script from the panel page by forwarding the tab id of the inspected window and pulling that out in my background page. So I have to do this
// devtools.js
chrome.extension.sendMessage({
'to': chrome.devtools.inspectedWindow.tabId,
'message': 'whatever'
});
and
//background.js
chrome.extension.onMessage.addListener(function(message,sender,callback) {
message.from = sender.tab.id;
chrome.tabs.sendMessage(message.to, message, callback);
});
And my content.js script gets the message just fine ... and i thought that the sender's tab id would work to send things back from the content script, but it doesn't. The background script gets the message but the devtools page never gets it back.
I'm having a bit of trouble figuring out how to properly debug devtools extensions as well. The content script can log to the page's console and the background script logs to the background page that you can inspect from the extensions page, but where does the devtools page log to?
The code I was originally testing works fine now with Chrome 26+ ... I think I was doing something that should have worked but didn't at the time that caused the behavior I was seeing.
#Konrad Dzwinel's comment was very helping on debugging devtools and noting that fact that this method actually should and does work. Thanks!
Just a quick update from 2016 (and Chrome 54+) for anybody who could also struggling debugging DevTools extension:
After adding custom DevTools pane successfully and showing Angular2 app in it, I found that the extension isn't connected to the page DevTools console and sources. Hitting on the page DevTools window F12 as suggested above doesn't work (have no idea if it's Chrome itself of some problems in my system), the page DevTools window is closed. But pressing Ctl+Alt+I on the page DevTools window opened one more DevTools window with the custom pane application sources and console attached.
I'm writing a Firefox extension and need to notify an iFrame page of certain events. The iFrame page is contained within a sidebar created by the extension, and this iFrame page is controlled by me.
When I load the iFrame page, the extension code needs to send a notification and trigger something to happen within the iFrame page.
To accomplish this, I'm creating an event from the extension Javascript and firing the event, which the iFrame page is listening to.
Unfortunately, when invoking document.createEvent(), this error pops up (copied, with the quotes, straight out of Firebug):
Operation is not supported" code: "9
Any clues on the error, or suggestions on how to trigger something in an iFrame page from the extension Javascript?
Firebug helps debug web pages. From your description it appears that the problem happens in your extension, so set up the profile according to the documentation and look in the Error Console.
Other than that, remote debugging requires seeing more of your code :)
That error is NS_ERROR_DOM_NOT_SUPPORTED_ERR. Are you using the right document (the content one, not the XUL window)? Although, I'm not convinced that that would error out either (in fact, I think it should work).
This is an example of code that works for me:
var eventName = "my-event";
var event = document.createEvent('Events');
event.initEvent(eventName, true, true);
document.getElementById('my_event_listener').dispatchEvent(event)
Here is the situation:
A page (iframe.html) has an iframe loading another page (iframe-content.html).
An JavaScript error might happen when iframe-content.html is loaded in the iframe.
I'd like that exception to be visible to the browser (e.g. shown in Firefox error console, or Firebug).
Here is what I see:
When iframe.html is initially loaded, and loads iframe-content.html with src="iframe-content.html", the JavaScript exception shows in Firebug.
However, if the page is loaded in JavaScript (document.getElementById('iframe').src = 'iframe-content.html'), the exception doesn't show.
You can reproduce this by going to:
http://avernet.googlepages.com/iframe.html with Firefox.
You'll see the exception as iframe-content.html is loaded.
Click on the button: the content of the iframe is loaded again, but this time the exception doesn't show in Firebug.
Is there a way at #3 to have the exception show, instead of it being silently ignored? (You can't use a try/catch around the JS code that sets the src, as this code returns immediately before the page is loaded in the iframe.)
It seems that your iframe page is not really loaded on the second time. Or it's loaded from the cache and the error is ignored. This is interesting, but I think I found an way around it.
function setContent() {
try {
console.log("Loading iframe content");
document.getElementById('iframe').src = 'iframe-content.html?foo=bar';
} catch (e) {
console.log("Caught", e);
}
console.log("Done loading");
}
With that the error should appear.
What I did, was to trick the browser to think that I'm loading a brand new page as the parameters after the url have changed.
'iframe-content.html?foo=bar';
You could replace my "bar" string with a changing timestamp. Sure, it would avoid the cache, but it would also force it to generate the error like you wished.
I've rewritten my family web site using JavaScript (JQuery) making Ajax calls to PHP on the back end. It's your standard "bunch of image thumbnails and one main image, and when you click on a thumbnail image the main image changes" kind of thing. Everything is working as expected when using Firefox, but on IE, when I click on a thumbnail, the main image changes to the one I clicked and then immediately changes back to the first one. I have tried MS Script Debugger to no avail; I set a breakpoint in the JavaScript code that starts the Ajax call, and when I click the thumbnail the breakpoint fires. Then I hit F5 and it continues but does not fire again. If I use Wireshark to watch the actual TCP packets over the network, I can see that we are definitely sending more than one request to the server. I cannot figure out where the second query (the one to revert back to the original image) comes from.
Any suggestions? One example of what I'm talking about is here.
Debugging through your site here's what it looks is happening:
After the first image is pocessed, the resize event is being thrown, so this code gets called:
$(window).bind("resize", function(){
ResizeWindow( 'nicholas-1' )
});
which as you know reloads your gallery. Now I can't tell you why this is occurring but this is where the trouble starts.
For future reference to debug this I used VS2008 to attach to IE. I then put a break in $ajax() at:
// Send the data
try {
xhr.send(s.data);
} catch(e) {
jQuery.handleError(s, xhr, null, e);
}
Then I simply hit F5 which is run for the first two ajax calls, then I open up the call stack window when I found the rogue ajax call and walked the call stack back up to the function I posted earlier.
Good luck.
You could use Fiddler, a free debugging proxy for Internet Explorer. It was a great help for me many times when I had to debug specific,server-related problems on IE.
Here is an Introduction to Fiddler on MSDN.
alt text http://i.msdn.microsoft.com/Bb250446.ie_introfiddler_fig04(en-us,VS.85).gif
IE is a piece of work, isn't it? Have you tried something like this?
var inProcess = 0;
function eventHandler() {
if (inProcess == 0) {
inProcess = 1;
// do stuff
setTimeout('inProcess = 0', 5000);
}
}
Cute kid, by the way.