Message passing and onclick action conflict

[Mdkart]

Hi all!
I need a little help with message passing.


1] There is a form on a page (page.html) where I can't modify
anything. The submit button call a function of a javascript hosted on
this page :

<input type="button" name="movebutton" value="Submit move"
onclick="javascript:SubmitMoveAction( );" class="formbutton">



=> My goal is to to add a function to refresh a counter of my
extension when the user click on this button.

2] So, I've created a content script in my extension
"play_detection_script.js" :

if (document.getElementsByName("movebutton"))
document.getElementsByName("movebutton")[0].onclick = playDetected;

function playDetected(){
chrome.extension.sendRequest({play: true}, function(response) {
console.log(response.farewell);
});
}



3] That call a function on my background.html :

chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension Chess@Work Notifier");
if (request.play == true) {
sendResponse({farewell: "Goodbye, I start a request"});
startRequest();
}
else
sendResponse({}); // snub them.
}
);




This works well since it refresh my extension but the initial action
of the submit button (ie : SubmitMoveAction( );) is no longer called.
There is no javascript error on logs of background.html nor page.html.

Is there something wrong with my code?

[Matt Perry]

The problem is with this line:

>       document.getElementsByName("movebutton")[0].onclick = playDetected;

You're replacing the original onclick event, so it never gets called. Try this instead:

       document.getElementsByName("movebutton")[0].addEventListener("click", playDetected, false);

Though this might end up firing after the form submit occurs. You could also try saving the original onclick somewhere, then calling it in playDetected once you are done talking to the bg page.

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.

[Mdkart]

It seems to works well! I thought that scripts added by the extension
and original script in the page were completely separated.
Thansk for your help!

[PhistucK]

They are, but they share the same DOM. element.onclick is an attribute of a DOM element. addEventListener is a different case.

If you want to call the original onclick handler ("SubmitMoveAction()") from within playDetected, you will have to hack your way to it -

location.href="javascript:SubmitMoveAction();void(0);";

☆PhistucK

--

[Mdkart]

Thank you for this clarification.

[Ben]

Or, you could do something like this (if you must use onclick):

// Example code, adds event to the "Google" image on www.google.com
// which writes "Hello world!" to the console, creates 'bla' from the
// original function, then replaces the old event with a new event
// which calls a new function that also executes the original function
// ('bla').

document.getElementById('lga').firstChild.onclick=function()
{console.log('Hello world!');}

bla = document.getElementById('lga').firstChild.onclick;

document.getElementById('lga').firstChild.onclick=function()
{console.log('Again!'); bla()}

It appears to work whether the event is added via javascript or via the
onclick attribute. It's hacky, sure, but it works. ;-)

> To unsubscribe from this group, send email to chromium-extensions
> +unsub...@chromium.org.

> For more options, visit this group at
> http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.

--
Ben