Google Chrome extension (Fire a event when extension starts) - javascript

I want to fire a event just when my chrome extension starts. How do I achieve this? Is there a event listener that triggers when extension starts?
for example:-
chrome.runtime.onInstalled.addListener(function(){
console.log('i will run once!');
});
Similar to this but not on installed but on start and it should only fire once during the extension's run time which is when it starts.

You could use an onload event in your background page and put the code that you want to be executed on extension "start-up" in there.
Example (inside background.js):
window.onload = function() {
console.log("Extension has started...");
};
That message will be logged (once) when:
Extension is installed
Chrome is started (and extension is enabled)
Extension is enabled from disabled state

Do you mean "onStartup" event?
chrome.runtime.onStartup.addListener(function callback)
See Google documentation here

Just place any code to background.js and it will execute when extension starts
console.log("extension starts");

Related

JavaScript: Listening for browser tab change

I'm trying to trigger an event on browser tab change in JavaScript. MDN advertises a browser.tabs.onActivated() function, and shows full support in Chrome, but my Chrome console barks when I try to access either browser or tabs global variables.
Does anyone know how to trigger an event on change of browser tab? I'm looking for a vanilla solution without external library dependencies.
I ended up using:
document.addEventListener('visibilitychange', function() {
console.log('the tab hath changed');
})
use 'visibilitychange' event and 'hidden' attribute.
document.addEventListener('visibilitychange', () => console.log(document.hidden));

Chrome: Debug who changes document.location.hash

I'm analyzing a site where the document.location.hash changes after some seconds since page loaded. It seems something asynchronous.
Is possibile to debug who change the hash, via Chrome inspector?
By now I only add a "watch" but is hasn't breakpoint.
Thanks
You can enable an event listener breakpoint for "hashchange":
As of 2019 Q4, this functionality exists in the "Sources" tab, in a panel titled "Event Listener Breakpoints".
When code now makes a change to location.href Chrome would stop at a handler for this event:
You can now go to the cause using the "Call Stack" panel.
This only works when there's already an event handler for hashchange.
Assuming you don't have such an event handler in your code yet, create an event handler like this:
window.addEventListener("hashchange", function(e) {
debugger;
});

debug javascript function with parameters

I have a website with javascript and when I move my mouse on that website, there is function triggered. I need to debug whole javascript code step by step when it is executed. I need to find out which function is called (and parameters too).
How can I do this - what should I use for this?
Any real time debugger?
EDIT: Now I see it is script loaded from another url (my site is mydomain.tld, second script loads from seconddomain.tld). Second script is obfuscated/minimized and it control clicks on website (when clicked, it triggers one function).
Is it possible with javascript on my site to call function in that second script? If yes, how please.
Just put the command debugger anywhere and Chrome will stop there when it happens to pass that place by.
Don't forget to keep the debugger open by pressing F12
I need to find out which function is called
In console (Firebug, Developer tools, etc.) you can click Profile button or use commands:
console.profile();
//...
console.profileEnd();
And it will display what functions were called during the profiling.
Then you can use debugger; command inside the functions as everyone mentions.
If site uses jQuery then you can go to the function source with Chrome DevTools. Go to event listener sidebar in elements panel, expand interesting event and click the link to source.
E.g. input#new-todo has internal jQuery listener but DevTools has resolved it and show link to user defined function outside framework.
You can use Chrome for that. You can add breakpoint.
See the doc https://developer.chrome.com/devtools/docs/javascript-debugging
you can track mouse move event by
<script>
$(document).mousemove(function(event){console.log(event);});
</script>
and open console window in browser when mouse move it will display all things...

Chrome extension: detect create window event from background

Task: I am opening chrome(with my extension installed) with selenium webdriver in python. I want to attach a listener when selenium opens the window of chrome.
Already Tried: I have already tried chrome.windows.onCreated event in background of my extension, but it is not firing.
I have done a work around of it. May be helpful for others aswell. First, chrome.windows.onCreated will fire only if a new window is created from current window. Since I wanted to run some logic when selenium creates a fresh window therefore I put the code in a myFunction and call that function directly in background page. As a fresh chrome is created by a code in background page executes once and calls myfunction.

Adding event listeners in Google Chrome extensions

So I'm trying to write a Google Chrome extension, and so far my code looks like this:
callback_function = function () {
chrome.tabs.create({selected: true, url: "http://www.google.com"});
};
document.addEventListener(chrome.history.onVisited, callback_function());
If I'm reading the documentation correctly, chrome.history.onVisited is an event that fires whenever someone visits a website, and chrome.tabs.create creates a new tab with the specified URL. And if I understand correctly, an "event listener" waits for events to be fired, and runs the callback function whenever the event is fired.
So by my logic, this code should create a new Google tab every time I visit a website. But for some reason, it only creates the Google tab when I first reload the extension. Why is that?
Ouch. No, that's not how Chrome API events work. They are not DOM events.
Read the documentation here: https://developer.chrome.com/extensions/events
In short, you need to take the event object (chrome.history.onVisited) and call its method, addListener:
chrome.history.onVisited.addListener(callback_function);
Also, note: you want to pass a reference to the function itself (callback_function), and not the result of its execution (callback_function())

Categories