Update storage schema on extension update in an event page - javascript

I have a method to change format of localStorage strings when the extension updates.
The question is more on where (in the event page) to execute the method.
The method MUST run at update or the whole extension will not work anymore.
Currently I put it here:
chrome.runtime.onInstalled.addListener(function(runInfo) {
if (runInfo.reason=="install") {
}
if (runInfo.reason=="update") {
//HERE!!
}
});
It executes fine on extension update, that's what I want.
But it seems like if the extension is disabled when the update happens it will not run at all.
Then when the extension is enabled again, the user will deem it to be a bug.
I was hoping there is a chrome.runtime.onEnabled, but there is no such event.
There is chrome.management.onEnabled, but I don't want the event page to wake up for every other extension's enabling/disabling.
Thought of putting the method to run every time the event page wakes, by putting it in window.addEventListener("load", HERE);, but I'm afraid running it every time might slow down the real work that the event page was triggered to do.
Any suggestions?
Any devs have any better way they are using now?

Related

Will dataLayer.push() definitely send data to google when triggered on an anchor?

This may seem like a simple question, but it doesn't seem to be answered anywhere that i can find.
I am writing an onClick event handler that simply calls dataLayer.push() when an anchor is clicked.
Is dataLayer.push() a synchronous operation?
Will the GET request to google definitely be sent, even though the browser has unloaded the page it was requested from due to the link being followed?
Some browsers show the connection get cancelled, some show it success.
My question is if the computer is slow, is it possible for the page to get unloaded before the request is sent?
This is why i assume that google started using the eventCallback property to redirect the user after the link has been followed.
e.g.
https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks
This source code does not include the click handler, but implies that the onClick event should stop propogation and let the eventCallback function set document.location.
However, as soon as you cancel the event, all its information has gone.
This (in my opinion) is just the wrong way to do it.
e.g.
(CTRL or COMMAND) + Click opens a new tab on browsers. This will not work unless the onClick event handler allows the prorogation to continue.
Relying on eventCallback also means that if the google scrips didn't load for one of the many reasons it could (but is still unlikely), your links don't work. And your site is broken.
So this leaves the correct way to do it for the onClick event handler to allow the event to propagate and return true.
Which also means that dataLayer.push() would need return after the GET request was sent for any of this to work properly.
Code example:
NOTE: You will get mixed results in mixed environments.
Link
$(document).on('click', 'a', function(event) {
// Is dataLayer.push() guaranteed to fire a GET ?
// data set externally
dataLayer.push(data);
return true;
});
Is there anyone out there that can guarantee that the GET request will get fired to the google server?
Have the google developers forgotten something here?
EDIT: Updated title to be more relevant to the question.
datalayer.push does not send anything to Google. It pushes objects with key/value pairs to the datalayer array. This might contain an event which in turn fires a tag. Whether the tag is sent depends on the setup of the tag, not on the dataLayer.push.
As a consequence, when you write your own click handlers your are yourself responsible to make sure your tags are actually fired.
If you use the built-in click handler you can configure a delay to make sure your tag has time to fire before the link redirects:
Since link clicks usually cause the browser to load a new page and
interrupt any pending HTTP request, you have the option to add a small
delay to allow tags fired by Tag Manager to execute properly before
redirecting to the next page. Checking the “Wait For Tags” option will
delay opening of links until all tags have fired or the specified
timeout has elapsed, whichever comes first.
You should be able to mix both methods (push data on the click, but still use the "native" link click handler for the event).
You can also try to specify "beacon" as the transport method in your Google Analytics tags, on browsers that support this (which I think is only Chrome at the moment) GA will then use the navigator.sendBeacon interface, which sends the data even in case the page unloads.
You might think that Google's solution is not very elegant (but the simple delay has the advantage that it works for all tags, not just for GA), but they have not "forgotten" the problem.
Also solutions that combine GA hit callbacks with timeouts that redirects if the callback fails as proposed i.e. by Simo Ahava somewhere should be be doable with GTM, even if they are probably more cumbersome to implement in GA.

When editing jquery in Chrome console, how to re-run that event?

When using Chrome console, I am editing the value of a variable that is set in the document ready event, but obviously this event has already fired and me editing the variable will have no effect.
Is there a way to re-run this event somehow?
Either edit your js files and refresh the page, or enter whatever you want to change into the console part of the Chrome Development Tools to see it without having to refresh the page
For e.g. $('p').hide();
Although you will obviously still need to edit your files to keep this change permanently.
I'm not saying this is a good idea, as it's an event which is supposed to fire once when the DOM is ready, but have you tried this?
$().trigger('ready')
edit
scratch that - it won't work as jQuery gets rid of the event handler once it has run the first time.
See this question:
How to trigger $().ready() in jQuery?
So you'd probably have to rewrite all of your JS to fit into a separate function and then run that function again.
Having said that, the scope of the variable you are changing would need to be outside of that new function if it is going to retain the value you have changed it to.

Firefox onLocationChange not always called

I am building a firefox extension that creates several hidden browser elements.
I would like to addProgressListener() to handle onLocationChange for the page that I load. However, my handler does not always get called.
More specifically, here's what I'm doing:
Create a browser element, without setting its src property
Attach it to another element
Add a progress listener listening for onLocationChange to the browser element
Call loadURIWithFlags() with the desired url and post data
I expect the handler to be called every time after 4, but sometimes it does not (it seems to get stuck on the same pages though).
Interestingly, if I wrap 3 and 4 inside a setTimeout(..., 5000); it works every time.
I've also tried shuffling some of the steps around, but it did not have any effect.
The bigger picture: I would like to be reliably notified when browser's contentDocument is that of the newly loaded page (after redirects). Is there a better way to do this?
Update: I've since opened a bug on mozilla's bug tracker with a minimal xulrunner app displaying this behavior, in case anybody wants to take a closer look: https://bugzilla.mozilla.org/show_bug.cgi?id=941414
In my experience developing with Firefox, I've found in some cases the initialization code for various elements acts as if it were asynchronous. In other words, when you're done executing
var newBrowser = window.document.createElement('browser');
newBrowser.setAttribute('flex', '1');
newBrowser.setAttribute('type', 'content');
cacheFrame.insertBefore(newBrowser, null);
, your browser may not actually be ready yet. When you add the delay, things have time to initialize, so they work fine. Additionally, when you do things like dynamically creating browser elements, you're likely doing something that very few have tried before. In other words, this sounds like a bug in Firefox, and probably one that will not get much attention.
You say you're using onLocationChange so that you can know when to add a load listener. I'm going to guess that you're adding the load listener to the contentDocument since you mentioned it. What you can do instead is add the load listener to the browser itself, much like you would with an iframe. If I replace
newBrowser.addProgressListener(listener);
with
newBrowser.addEventListener("load", function(e) {
console.log('got here! ' + e.target.contentDocument.location.href);
}, false);
then I receive notifications for each browser.

Trigger events defined after DOM load - JIRA open new issue modal

I am building a third party plugin to the popular platform Atlassian JIRA and where I have implemented a calendar. However when I click on a day outside any event, it triggers a function which will trigger the #create_link event.
When that event gets fired a new modal window opens and the user may fill out a new issue. The thing is that I want to change the issuetype field and then fill in one field automatically. However, I have no idea how to generate a new window with these result (I don't think it's possible) and therefore my only option was Javascript events.
This is my code so far:
jQuery.when(AJS.$('#create_link').trigger('click')).done(function() {
jQuery.when(jQuery('#issuetype-field').trigger('click')).done(function() {
jQuery('.aui-list-item-li-event').find('a').trigger('click');
});
});
//I have also tried to use `.then`
The thing is, the triggers work when run separately in console but it seems like the jQuery.when doesn't. Because the next event triggers long before the window has been loaded.
What I need is a way to wait to trigger the last 2 events by using callbacks on the triggers or what not. How can I solve this problem? Also, if anyone know how to create a new issue window with js in Jira that is also a very acceptable answer.
Using Jira issue collector would make your task much simpler. You can configure it to receive feedback or bug reports etc.
https://confluence.atlassian.com/display/JIRA/Using+the+Issue+Collector
The integration of the issue collector is merely adding a script tag in your HTML page

back/next button in dynamically constructed webpage (AJAX)

My question is about using Back and Next buttons (of the browser) on an AJAX (dynamical) webpage.
The solution I self came up with:
setInterval(function(){
if (location.hash != hash)
{
hash = location.hash;
app.url = window.location.href.toString().replace('http://xxxxx.nl/xxxx/#!/','')
app.handleURL();
}
}, 500);
this function reads the url(hash) and compares it with the last stored url(hash), every 0.5 second. If url has changed (back/next is pushed) it runs handleUrl() which runs more functions to dynamically build my page.
the problem is, this sort of works BUT when I click an html [A] element or when I change the url in an other way (javascript), that content will be loaded TWICE because of the setInterval()... functionality.
How can I build my HTML/Javascript in such way that my content will always be loaded once,
once when I push back/next
once when I click on an HTML element/use Javascript functions on
runtime
I searched the sh*t out of google for a solution, plz help!
You don't need a timer to check it. Just use the onhashchange event, and fire your AJAX calls when the event is called. This event isn't supported in IE versions below 8, though, so your method seems fine if you need IE support.
Also, it doesn't make sense that they're being called twice for a elements, since there's no reason for the interval to call your AJAX loader twice just because the hash was changed using an a element. You probably have an event listener attached to the a element which causes it to load the AJAX content, which wouldn't be needed since you're detecting any change in the hash, no matter how it was changed.
I suggest using a library for that. It will be tricky to make your own solution. Take a look at these:
http://www.asual.com/jquery/address/docs/#sample-usage
http://benalman.com/projects/jquery-bbq-plugin/

Categories

Resources