Chrome extension options page minimized unless move away from tab - google-chrome-extension

Upon switching to Chrome's Manifest 3 format (and per its requirements, using a service worker if that's somehow relevant), my options page shows up like this:
Only upon moving away from the tab and reentering it, do I get my options to show up:
It doesn't matter if I trigger the options page via the toolbar or via its extensions entry.
I do have the options page in the manifest file, so I wouldn't think the change to a service worker has relevance. I don't have any listeners for the page visibility API.
Even when I blank out my options code with a minimum of content and update the unpacked extension, I still experience this behavior.
Any configuration or behaviors that could be triggering this (and how to overcome)?

It seems that whatever the cause of this behavior, that it only occurs when loading an unpacked extension. When I use web-ext to build a zip file and open that in Chrome, I don't see this problem.
Not ideal, but a bug I can at least live with.

Related

Auto Save or Prompt before navigating away from text editors in Kentico CMSDesk not working

Auto Save or Prompt before navigating away from text editors in Kentico CMSDesk not working. I already set the Settings -> Content Management -> Prompt to save changes on exit to checked, but didn't work. Can somebody help me.
-Thanks in advance
What I would suggest is to enable the developer tools in chrome or firebug in firefox and check, if there are any javascript errors in your pages. it's possible that some custom javascript interferes with this check. Check for any errors and try to resolve them. Or, as a test, try creating a completely blank page in the content tree, with only an editable region and disable any master page inheritance so there won't be any custom code used on your page and test, if it works there. If it does, then keep adding your scripts and test to see which component or script is causing the issue. Also make sure your settings are enabled on a site level in the settings application.
Which version and hotfix do you use? I suppose you are using v7 (or less - because of CMSDesk). Please note there were some bug fixes related to prompt in CMSDesk (eg. in 7.0.80).
Content editing - The ‘Prompt to save changes on exit’ setting didn’t work correctly
You can find more information about hotfixes and fixed bugs here.
edit: after additional info (screen from your console) I think you have registered your own jquery and you don`t have registered it in no conflict mode. Can you agree? Could you register your jquery in nonconflict mode and try the prompt behavior again?

Chrome extension pauses before loading

Question
How do I reduce the time between clicking an extension icon and the content being displayed?
Support
I'm making a very simple extension. It loads quickly once it's started, but there is a bit of a delay between clicking and the popup loading. I've added a gif of this here. (The gif gets a bit hectic to look at, so I've put it under a link so that it doesn't burn your eyes!) It doesn't really do it justice as it loads faster on my machine than other people's for some reason.
This question (Slight loading delay with chrome extension popup) seems to address the same question, but it doesn't have an answer. I think that this question (load chrome extension popup faster) addresses this issue too, but its answer seems to be addressing a different problem.
My repo is here: https://github.com/bvn-architecture/shackleton
If I profile the load time of the extension it starts measuring from when the popup appears:
This implies that there is something on the screen about 5ms after loading. It doesn't include the pause.
I think the delay you are facing is due to the time necessary to launch a new task process in Chrome.
Open Chrome menu > More tools > Tasks manager, you will not see any reference to your extension.
Now click on your extension browser-action icon, you will see that, after some various delay, a new entry called "Extension : BVN toolbar" will appear in the tasks manager. Once the task appears, your popup opens.
Some tests
If you test the My Bookmarks sample extension from the Chrome extension samples, you will see the exact same behavior.
Now if you have a look at some other extensions like Adblock Plus for example, which uses a browser-action icon/popup like you, you will see that its popup opens much faster than yours.
If you check the tasks manager again you will see a task named "Extension : Adblock Plus" even when the popup is not opened.
Explanations
This is because many extensions (like the Adblock one) are using persistent background pages which are single long-running scripts existing for the lifetime of your extension (until you disable it, close your browser etc.)
As mentioned in the documentation, the use of persistent background pages is discouraged in favor of event pages (non persistent ones). But in your case, using an event page will not solve your problem because when the event page is not actively doing something, it is unloaded to release resources.
Solutions
The easy way
Defining a persistent background page in your manifest.json file will solve your problem but will result in a not really necessary memory usage to keep your extension task "alive" (and your extension don't need it to work):
"background": {
"page": "popup.html"
},
The other way
Submit the question / problem to Google. Maybe they can perform some optimizations for such case or they will provide you a better solution. And you can explain that this encourages the use of persistent background page instead of event ones :-)

How do all types of Chrome extension scripts work?

I'm new to Chrome extensions and would like to understand how all types of scripts/pages work.
Here is my understanding:
First - there are "content scripts", ones that should be used to actually modify the pages.
Second - there is a "background script", designed to work like as a server that you send and receive messages from, but it does not modify the pages' DOM; so it can perform tasks like dealing with storage and communicating between scripts but not modifying the page.
Lastly - there are "popup scripts", they are separated from both content scripts and background scripts, but you can still send/receive messages between them.
The popup scripts can NOT directly modify the page (same as background script), they can only send messages to the other two.
You do not declare them at all in the manifest file, you can just go straight and use them in your popup html file.
In the end only the content scripts can eventually actually modify a page.
Am I correct?
One Chrome extension documentation Link to rule them all, One Link to find them,
One Link to bring them all and in the darkness bind() them1:
>> Architecture Overview <<
(artist's impression)
It should answer many of your questions. However, that would be a bad SO answer, so a summary from me:
Background page/scripts: Only one page exists per extension. It is invisible and can never be displayed in a tab. Normally, it is open as long as Chrome is open, though there are exceptions. Since it's always there and has the highest level of access to Chrome APIs, it's frequently used for main logic / event routing between parts of the extension. In short, background work.
Event page/scripts: A variant of background pages that are unloaded if there is no code running. This saves memory, but introduces complexity as to maintaining state. Chrome remembers which events should be listened to (via addListener) and loads the page again when they happen. Hence, event page.
Besides that, extension can have other, visible pages. You can just open them in a tab (they would have chrome-extension://extensionidgoeshere/page.html address), and they will have same level of access to Chrome API. Two UI types are special to extensions though:
Browser/Page Action popup: A small window that's opened with a click on the corresponding UI element. Unfortunately, it's also very fragile - it will close as soon as it loses focus. Other than that, it's just an extension page.
Options page: Comes in two flavours. Version 1 Options page is just a tab that's opened when invoking options for an extension; Version 2 Options page can optionally show in a special box inside chrome://extensions/. Again, other than that it's just a page with extension privileges.
Finally, having a bunch of pages is fun, but if you want to interact with existing pages/tabs, you'll need to inject scripts in them.
Content Scripts are scripts that run alongside pages; for compatibility reasons, they run in an isolated world. For security reasons, they are severely limited in access to Chrome API. But they share the DOM with the page, and as such can modify it.
Page-level Scripts is something you barely find mentioned in documentation (as "DOM injected scripts"), but they are very useful to break the barrier between extension JavaScript and page's own JavaScript. A good overview of them is presented in this answer by the magnificent Rob W.
Having defined all relevant extension parts, the documentation page also briefly mentions how to communicate between them. For a more in-depth look into this aspect, see this answer (again by Rob W) and the Messaging documentation.
1 Seriously though, every beginning extension developer needs to read that, and this page is not prominent the documentation. Good job, Google.

How is the panel displayed when launching Chrome Hangout extension made to be always on top and pinned?

When launching the Chrome Extension Google-Hangouts, a panel initially appears that lists members and a link/button to create a new Hangout.
This panel is initially pinned to the bottom right of the browser window. When pinned like this, it remains always on top as a browser navigation session continues: users can go to different URLs, change tabs, etc. and that panel stays at the bottom right and stays on top of all other windows (or at least on top of the main browser window).
Once it's unpinned, you can drag it around the window, but it no longer stays always on top.
My question is, how was that achieved - what code, or what functions, do i need to call to create that window/panel so that it stays initially pinned and always on top? Is there some binding to some native code that's involved? Some other approach?
If anyone know and can show or explain, i would be hugely grateful as this feature is key to an extension i'm trying to build.
Thanks a lot!
This may not be an answer but to get a clue of what is happening I extracted the crx file to view its content there are a few OS specific files : ace.dll , libace.so and ace. After researching a bit i found this. This is a plugin. Hangouts extension is using ace plugin which is actually running on your desktop(i'm not sure about this). You can check this article
I found this related post: How to build an chrome extension like Google Hangouts
ACE is actually not what makes the window, Chrome has that capability built in, apparently. Even if you don't enable panels, extensions from Google can still make them, provided your OS is capable.

Chrome extension performance

I have developed a chrome extension. The extension itself works fine and fast.
But when I start the browser and click on the toolbar icon of my extension it takes about 2 seconds for the popup to appear and to show its content (this happens anytime the browser is restarted).
Any idea what causes this and how to fix that?
Tip 1:
Use your popup page for rendering exclusively. It should be as light as possible. All the heavy loading/processing (localStorage, XMLHttpRequests, blocking javascript) must be done in the background page.
The background page is loaded when Google Chrome starts. Basically, it allows you to execute code and keep a page always running (although the popup is not present). For instance, streaming audio in a html5 tag with no popup.
Note: If you are not using a background page yet, you should be taking a look to message passing first.
Tip 2: Warning: This could fail
I haven't tested this yet, but maybe using the HTML5 manifest.cache can help you preventing loading again resources stored locally. But beware, this is HTML5 and is prone to changes and unstability across versions. (also, I am not completely sure that the cached resources will be loaded in memory before the popup is opened)
Hope it helps!

Resources