This question already has answers here:
Access variables and functions defined in page context using a content script
(6 answers)
Closed 5 months ago.
I have a Chrome Extension which runs on a dedicated domain and manipulates the DOM. (Everything here is kosher: the user INTENTIONALLY installs this for this specific given site, and even the site owners are aware/support this extension, but they are not able to change its code easily.)
One page loads the content via AJAX, and refreshes a given every minute or so with a polling AJAX call. There is a specific function, UpdatePageComplete() that they call at the end of the AJAX sync. I need that function to then call one of MY Chrome Extension functions, so that I can manipulate the new data (ex: adding <a href='tel:' wrappers to any phone numbers, or background-colors to elements with certain contents).
I can't figure out how to inject my own callback into their native functions though. Is this even possible? If so, where should I be looking?
I've done something similar in the past. You can't inject your own callback into their code, but you can:
Create a global function for them to call (inject window.mySpecialFn = () => {...})
Add a custom event listener on the body, and have their code dispatch that custom event.
Related
Is there a way for me to delay a function call in Google Apps Scripts? I'm currently testing for smaller time frames, but I would eventually like to have a 72-hour wait period between processing data and calling moveRows.
I was trying to achieve this by making this Javascript function call:
setTimeout(function() { moveRows(arrayOfRows); }, 3000);
I also tried doing it with a trigger but my function never got called.
ScriptApp.newTrigger('moveRows(arrayofRows)')
.timeBased()
.everyMinutes(1)
.create()
What am I doing wrong?
As others have pointed out, setTimeout cannot be used in GAS. Instead, you can use the function [Utilities.sleep()][1] (see this answer).
setTimeout() belongs to the 'window' object that is not present in GAS. Remember, the code is compiled on Google servers, not in your browser, so you don't have access to DOM in this environment. Similarly, you can't reference 'document' or other DOM objects. The only place where it's possible is client-side HTML that HtmlService creates and sends to your browser for rendering.
You can only pass function name as parameter to the newTrigger() method. You are passing the parameter, which is why it doesn't work.
This question already has answers here:
$(document).ready equivalent without jQuery
(39 answers)
Closed 1 year ago.
When I learnt JavaScript a few years back, jQuery was still considered good standard practice, and it was recommended that the main application code be called from the $document.ready() event handler, so as to ensure the DOM was safe to use.
Fast forward a few years since the last time I worked on JavaScript, and the consensus nowadays seems to be to avoid jQuery. Also, since scripts are usually loaded at the very end of the HTML document, it seems that $document.ready() might not be needed any longer.
In question $(document).ready equivalent without jQuery I see several modern alternatives for this piece of code. However, it is still not clear to me whether including any one of these is considered standard practice or recommended, in general.
So my question is about current practice: should I always include such code as the entry point of a Vanilla JS application, or, on the contrary, is it considered now safe to start loading the JS app without any wrappers?
An equivalent is DOMContentLoaded event
The DOMContentLoaded event fires when the initial HTML document has
been completely loaded and parsed, without waiting for stylesheets,
images, and subframes to finish loading.
Source : https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
To address the last part of your question, I'd say "Yes !" ^^
You can define your custom functions outside of this "main function" scope, but wait for the event to be completed before doing anything with the DOM.
Is there a way for me to delay a function call in Google Apps Scripts? I'm currently testing for smaller time frames, but I would eventually like to have a 72-hour wait period between processing data and calling moveRows.
I was trying to achieve this by making this Javascript function call:
setTimeout(function() { moveRows(arrayOfRows); }, 3000);
I also tried doing it with a trigger but my function never got called.
ScriptApp.newTrigger('moveRows(arrayofRows)')
.timeBased()
.everyMinutes(1)
.create()
What am I doing wrong?
As others have pointed out, setTimeout cannot be used in GAS. Instead, you can use the function [Utilities.sleep()][1] (see this answer).
setTimeout() belongs to the 'window' object that is not present in GAS. Remember, the code is compiled on Google servers, not in your browser, so you don't have access to DOM in this environment. Similarly, you can't reference 'document' or other DOM objects. The only place where it's possible is client-side HTML that HtmlService creates and sends to your browser for rendering.
You can only pass function name as parameter to the newTrigger() method. You are passing the parameter, which is why it doesn't work.
I am creating a userscript for a game that will modify certain parts of a page in real time to help the user know how long they must wait to perform certain actions.
The problem I am running into is that the game has some AJAX already built in, every three seconds it calls the jQuery.getJSON() function to grab information to update things. My script needs to make it appear to the end user as if the page was updating in real time, rather than every 3 seconds. As well as add extra information. Without adding extra requests (the games owners will not like that).
To do this I need to override the default behavior of the page, I need to change the callback function of the jQuery.getJSON() call to add my functionality. Or at least disable it completely so I can write a new one. And it isn't as easy as assigning a new function to the old name, as it has no name, they just build the function within the jQuery.getJSON() call. Is this possible?
The page script is contained in a separate .js file btw, if that makes any difference.
If the jQuery.getJSON() call is assigned to a variable, it will return a jqXHR object, which you can then modify by adding or changing its callbacks.
If it is not exposed as a variable, but instead is simply called like so
... js blah ...
jQuery.getJSON("myurl",function(){
more blah
});
... more blah ...
... then I believe you're up a creek without a paddle, as that becomes an anonymous function call with no handle. The only way, at that point, would be to try to override by loading another script in place over the first one, but I am really uncertain how stable that would leave the browser environment.
See the jQuery reference for http://api.jquery.com/jQuery.getJSON/ and http://api.jquery.com/Types/#jqXHR for more details on how the $.ajax() system works.
I am currently making a sort of web app and part of it works by dynamically loading and adding js scripts to the page. For this I am using JQuery's $.getScript() method which loads it in.
I have it set as cached.
With my program if a script already exists it is loaded again anyway, from what appears to be cache. What I am wondering though is how much would this effect the site and performance. Does a newly loaded script that has the same src as an existing one overwrite the previous one or is the new one added alongside the old one?
Further more as my site is an AJAX site its possible for several scripts from different pages to eventually be loaded up over time. Is there any browser restrictions on how many scripts one can have loaded?
It will affect site performance. Even if your script is cached on the client with expiration set the browser still needs to parse and execute newly included script. More than that, there's a very good chance you will run into javascript errors because you scripts will override variables already set by previous version. JavaScript parsing and executing is still a blocking operation in all browsers, so while your file is being processed your UI will lock up.
To answer second part of the question, as far as I know there's no limit of number of javascript files on a given page. I've seen pages with over 200 javascripts that didn't throw any exceptions.
I think Ilya has provided some great points to consider, and I think that answers your specific question. If what you're trying to accomplish, however, is rerunning a $(document).ready() handler, you could do:
(function(){
var myreadyfunction = function(){
$('#affected').toggleClass('blue');
};
$(document).ready(myreadyfunction);
$(document).ready(function(){
$('button').click(myreadyfunction);
});
})();
http://jsfiddle.net/Z97cm/
I've scoped it into an anonymous (function(){})(); to keep out of the global scope, so you might want to consider that if you need to access that function from outside that scope. But that gives you the general idea of what I was talking about.