How to keep extension running in background after closing the popup?

Add-ons Development
,
#1

I developed this extension and was testing it in browser. The moment I the close the popup the timer stops running and resets to zero, all the settings are also reset to default.
How do i keep my extension running even after closing popup?

#2

I’m not sure what your extension is supposed to do because there is no README.md file, but I think your popup.js is being handled as a content script rather than a background script. I would create a background script (with a different name) to manage the timer and use some messaging between background.js and popup.js. On a side note, is there a reason for your using localStorage rather than browser.storage.sync or browser.storage.local?

#3

  1. how to do that messaging between background.js and popup.js?

  2. Secondly, aren’t the content scripts used to modify the content of webpage? I’m doing no modification of the webpage, i just want extension to keep running in background

3.Actually I didn’t knew that there is different API for extensions for storage that’s why I used localStorage. If you recommend using browser.storage.local i would shift to it. any specific reasons though that why there is different api to handle storage for extensions?

#4

popup.html is your web page to my understanding!

This might help: https://stackoverflow.com/questions/13546778/how-to-communicate-between-popup-js-and-background-js-in-chrome-extension

#5

popup.html is the UI skeleton of the popup you must be seeing after clicking on the icon. I was saying aren’t content scripts used to modify the webpage we are visiting currently(the active tab of browser)

#6

In your popup.html you linked to popup.js. This is what makes me believe popup.js is being considered as a content script rather than a background script, even though you specified popup.js as a background script. It makes me think that you could have 2 separate instances of popup.js. But I am absolutely no expert! Someone from Mozilla would have to answer to be sure.
P.S: Background scripts don’t usually access the DOM!

#7

Yeah and I don’t even intend to access the webpage DOM. These extensions have their own DOM https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom Everything is happening in extension’s DOM and has nothing to do with webpage DOM.
And as said here in answer at stackoverflow, content scripts are for manipulating the webpage DOM, which I’m not doing. That’s the reason I do not have it in my manifest

#8

In your popup.html you linked to popup.js. This is what makes me believe popup.js is being considered as a content script

No, popup.js is not a content script. It is an extension script with full access to all APIs. However, it is only loaded while the popup is open. As you correctly suggested, to keep something running, you should be doing it in the background page of the extension.

P.S.: background scripts are just JS that runs in the background page, so yes, they have access to a DOM

1 Like
#9

Yeah correct! popup.js isn’t content script and background scripts also have access to DOM as I said, so where am I going wrong? I have defined background script in manifest, so shouldn’t it keep running in background?

#10

It will (at least in Firefox, when it is persistent). However, for time things, it might be better to 1) use the timer APIs for extensions, since that will give you an event when the time runs out (which you can listen to in both background page and popup!), no matter if your background page is persistent and 2) to store the timestamp the timer ends. That way, whenever you open your popup you can just show how long it is until the currently running timers have left.

I believe you have already been adequately informed how to pass data/state between the background page and your popup.

You asked about storages, the main advantage of browser.storage.local is that it is guaranteed to behave consistently, while localStorage might have side effects with permanent private browsing mode, clearing cookies etc.

#11

Could you guide me bit about what timer APIs you are mentioning about? I googled but didn’t find anything suitable
Are you pointing towards setInterval(), setTimeout() ?

Also I have been inspecting the extension by going to about:debugging

image
image1401×326 21.4 KB

The moment I open the popup again after closing it, the storage is reset to zero
image
image1802×330 29.5 KB

Could you explain a bit by relating this to the 2 point solution you suggested above?

#12
1 Like
#13

I went about dong some other work so didn’t reply.

I gave it a read. So essentially what you are implying is that I would have to replace my setInterval() functions with these alarms, right?

#14

Yes, Alarms are essential for the upcoming Manifest V3 so you will have to do it sooner or later. See this section for more details about Alarms and workers:

1 Like
#15

@freaktechnik @juraj.masiar I suspect the that I problem that I was actually facing might not have been understood by you because of a commented line in my code. I have updated popup.js and the problem I’m facing is mentioned in this reply with screenshots.
Could you take a looking again please?

#16

You can’t use your popup script as a background script :smiley:. It’s great though that you have set persistent to false, it will be more ready for Manifest V3. But it will also kill your timers so you have to use Alarms API.

image

Anyway, make sure to read this:

Your Popup is like a web page that runs only while it’s opened. So when you close it, it’s gone! Along with all event handlers.

Your background script is also like a web-page, invisible running in the background all the time - well, in Manifest V3 and with persistent set to false it will also be killed and awaken when needed - for example when the Alarm will fire.

So what you need to do (if I understand your use case correctly) is have a popup.js and popup.html which will handle user interaction and will send messages to the background.js background script that will register the Alarm event handler.

#17

Is it neccessary to have a specific background.js? Whatever needs to be done in background, I have put it all in popup.js and defined it as background script in manifest. Won’t that suffice?
Also just to make sure you that we are talking about same problem this time :sweat_smile: you ran the extension and observed same problem as in my screenshots, right?

#18

I haven’t tested it, sorry about that :slight_smile:. I’m trying to help the best I can with the limited time I have…

Few tips after checking your code:

  • create separate script for background script and popup script. If you have common code that you need in both, use module export / import.
  • you should not use localStorage (unless you have a good reason), addons should used storage.local. But it’s async so if you don’t know how to use async / await, it may complicate your code…
  • why do you write storage every second? Sounds like SSD killer feature :slight_smile:
  • consider using const much more, with all those let it’s really hard to tell what is changing and what not.
  • as I’ve mentioned before, all event handlers including setTimeout and setInterval will disappear after popup is closed

Make sure to read the MDN much more, all the wisdom is there!

#19

Alright, thanks I’ll try and work on these.
Regarding storage, I’m doing it so that my timer resumes from the point whenver I press the Pause button. And it works too, that’s only way I could think about to start or pause clock from the moment button is clicked

#20

hi . i have same problem . i have an extension that when popup open it work correctly but when i click somewhere or alt+tab , it stop working , is there any code to run extension always in background even when firefox is minimized ?