Chrome extension that communicates with multiple tabs, simultaneously - javascript

I am having trouble with making my chrome extension to work with multiple tabs, simultaneously.
The overall flow of my extension is:
Background script opens a new window at the beginning, where the extension js resides.
The extension than injects a js file in the browser's active tab, via executeScript api
In its callback sends a message to this same tab by which my js code performs operations on the tab's DOM
the active tab sends a message to the extension tab
the extension changes the address of the active tab, again via executeScript
background script listens to tabs.onUpdate to determine when the page address changed completed (status === 'complete'), to inject the js in the browser's active tab.
Steps 2-5 go on until a given criteria my extension tab UI defines is met, and the process stops.
This works fine, but I need to leverage this to happen in multiple tabs, simultaneously.
The first idea that pops is to create a number of tabs using tabs.create api, and assuming that simply passing the respective tab ids in the flow above - will work. But it does not.
In the simplest scenario of creating 2 tabs only, the 2 change address at the beginning - but the first tab only does that once. The process goes on with the 2nd tab only.
Is there an inherent problem with the flow above and the "infrastructure" of the extension that cannot accommodate such behavior ?
Am I missing using web workers in the background script - because it synchronize listening to multiple tabs messaging it ?
Any directions would be highly appreciated.

Related

Make site/tab think it's in focus

I'm developing a Chrome extension which updates a tab with a URLs in LinkedIn (every some times it changes the URL). The problem is that URLs in LinkedIn don't fully load until the user is focused on that site/tab, and I need the page to load when the user is using other tabs as well.
So is there any way I can use JavaScript (either using Chrome's background script, or a content script which will execute in the required tab) to make LinkedIn think the page is in focus, so that it loads fully?

How to find the JS function being called from Chrome Dev Tools in Angular application?

I'm working on trying to find a defect in an angular application in the javascript being used to scroll a page. Person clicks link, page scrolls. Simple.
Alas, I have no idea what functions are actually being called when a user clicks the link and given this app consists of dozens and dozens (and dozens) of separate files, I'm having trouble finding what's going on.
I've read about using breakpoints and setting them up via the SOURCES tab in devtools. However, regardless of which of the many JS files I open in there, I never get any breakpoint options to check.
Is there a way to see what JS is getting fired with a particular event on the page within Chrome's Devtools?
Go to Sources tab.
Unfold Event Listener Breakpoints
Unfold Control, check scroll checkbox.
Scroll the page.
Javascript runtime will stop on event listener bound to page scroll and place will be showed in main window under Sources tab. If it's library file (in You case Angular files), right click on the file and Blackbox script. Scroll page again ;)

Open several new tabs in JavaScript and get immediate control

How can I prevent tab opening delay so that I regain control immediately after a single window.open?
Is there any asynchronous window.open like instruction/function available?
Otherwise, how can I emulate the Ctrl+click behavior using Javascript?
… Given the following context …
I have a navigation bar that contains a lot of links pointing to different sections of the application.
One of the big bosses said: «When I click on many of those links the application gets unresponsive»
Which basically mean that he keeps on clicking on those links and then too many tabs suddenly open all at once.
The navigation bar contains links that when clicked trigger the following instruction: window.open(LINK_ADDRESS_HERE, "_blank").
I have noticed that if let's say 6 of those links are clicked within like two seconds, related tabs open as I click on them. But clicking 10 different (navbar) links causes to delay tabs opening, and all of a sudden, the expected tabs finally open, but it takes 3 or more seconds for them to open.
I suspect the user to run too many clicks at the same time and the browser might not handle this.
On the other hand Ctrl+click several links (so they open in a new tab each) on some random sites like StackOverflow doesn't disturb the browser at all and tab opening is not delayed.
In my opinion the issue must come either from my application's JavaScript code or the way window.open works.
Tabs open successfully when only few links have been clicked. But if I click a lot more after the first set of links that have already loaded, at that point this may be either that the application is slow and it takes longer for the new tabs to load, or opened tabs that still load consume the available connections the browser tolerate for a single domain/application (I think that's like 6 connections in HTTP 1.1) and so when new calls to window.open are made, they just wait for a connection slot to be freed. As suche, what I perceive as slow open tabs is due to window.open waiting for available connections.
Thank you.

Chrome Extension: How to run Javascript on page load (without popup open)

I have a Chrome extension that does word substitutions on pages. Currently I have a popup that opens when I click on a browser action which lets the user control whether or not to perform the substitutions. I also have a background script running that sends a message to content scripts when a page refresh happens using a chrome.tabs.onUpdated event handler.
My problem is that when I refresh the page no substitutions are made unless the popup is open (which is only possible when I have the inspect elements panel open on the popup, because otherwise the popup closes when I refresh).
Has anybody had experience with this behavior before? What additional instrumentation should I add to diagnose the problem? Is there a different extension architecture/code arrangement I should be using?
Thanks in advance!
If you use localStorage on a given page you can probably store whether or not to substitute words. I think refreshing a page is similar to opening a new tab, so your script gets reinjected/reloaded rather than staying open and receiving an onupdate message.

How do pageActions and browserActions differ?

I'm a writing a chrome extension that allows users to do the following:
Load data into the popup when the icon is clicked
Change the data in the popup based on actions the user takes on the page
Append elements to the DOM of the page based on actions taken in the popup
It seems that I can accomplish 1 with a script in the browser_action field of the manifest, but perhaps I need a page_action script for 2 and 3?
The core of the problem is that I do not know exactly how browser_actions and page_actions differ from each other. My limited understanding is that page actions allow data populated in the popup to be manipulated dynamically. Is this true? I cannot find an explanation about the differences that makes sense to me.
Browser Action is a type of extensions that use icon on the right of address bar. You click on that icon and popup page is loading. Those extensions work regardless of page currently opened.
Page Action only works while certain webpage(s) is opened. It displays as an icon inside the address bar (near page URL). This is for extensions only working on certain websites.
If you want to make your extension working on every website, you should use browser_action.
For further information you may want to visit these pages:
http://developer.chrome.com/extensions/browserAction.html
http://developer.chrome.com/extensions/pageAction.html

Categories

Resources