I'm new to chrome extension.
I need to have data created when working with the popup, available after closing and re-opening it.
Here're some more details about my specific problem:
whenever my chrome extension popup is opened a script runs. in the popup there's an option to click a button which will add an item to an array, which is used in order to display this list of items in another tab in this popup. However, since every time the popup is opened the code runs all over again, the array is emptied the moment the popup opens again, and obviously when the browser or the OS is restarted. I need this array to stay consistent through opening and closing of the OS, the browser and the popup itself. Any ideas?
btw - managing it from a background page is not good enough since the moment the os is restarted the background page session stops and the data is lost
When a popup is closed, its HTML document is completely unloaded; you need to restore state when your popup loads every time it's opened. No way around that.
As you mention, it's possible to persist state information in the background page while the browser is running. But it's still temporary storage; you need to use persistent storage to save whatever state you need to save.
The most obvious (and recommended) choice is chrome.storage API, specifically designed for this purpose. You can also use Web APIs such as localStorage or IndexedDB if you like.
Related
I have a situation where I am opening a user-initiated popup window on my site that points to another site. Users shouldn't be accessing this page directly, and should only go to it under normal conditions if the site opens the popup window.
mysite.com -> mysite.myothersite.com
I noticed that the popup window page appears in history, and worse, appears in the address bar autocomplete suggestions.
This popup window is supposed to perform a one-time utility operation so it isn't useful for the user to have this in their history or autocomplete suggestions. However, users are accessing this popup directly (assuming by accident).
While I can't prevent anyone from doing this, i'm wondering if it's possible to have that page not record itself in the browsers history. It's messing with my analytics.
You might want to look at the history.replaceState functionality provided by the history API.
If the pop-up is served at the same location, simply do history.replaceState({}, 'mypage', '/my-page-address') in the JavaScript of the popup window. This way, it replaces the myothersite history entry with the mypage history entry, and instead of using mypage you can use the title and address of the original page.
This is where state comes into play. Upon requesting the popup, place some indicator that allows the popup to open and then when the user requests it, clear that indicator. This type of information is usually done via backend session state, but can also be done completely via front end, but with with a reliability hit.
I'm sure this isn't possible but I'll ask anyway. What I want to be able to do is detect if a website is open in another tab, then using JavaScript, open up the same website but with a different query string in that same tab
The only way I can think of doing it is if they open the tab on our website first with a name, then next time they click on to the other website, using the same name it should open in the same tab, this isn't preferable as most users will have opened up the other website either by typing it in or from a bookmark
You may play around with 2 things:
localStorage
window.name
The approach could be following: every time your site is open, you store window.name to the local storage. If name is not present, you generate one.
Every time on start-up you check if there is a name saved in local storage, if it is, then you remove the name from the storage, and reload your website like this:
window.open(url,"name");
That should load the page into the open tab, or open new tab with that name.
One problem, however, is that a new window, that was openning your request is remaining in there, cause script cannot close windows that were not open by it.
I am working on Chrome extension which on clicking extension Icon popsup a window(popup.html) which contain button for Video Play. Upon clicking of the button opens another button which is created by using window.create of type panel. Upon clicking of PLAY button on popup.html does following:
Make a DIV enabled
Create new window by calling window.create with name mypanel.html. It uses panel.js to make ajax call and DOM changes functions.
Make an Ajax call, get data and play Video
Now thing is, the data I am getting via AJAX call in panel.js. I want to send that data back to pop.html which itself is using file popup.js. How can I send data from panel window to back to Popup Window?
The standard method of communicating between parts of the extension is described in Messaging documentation.
However, you need to keep in mind that as soon as a popup is closed, it is unloaded and the JavaScript context is destroyed along with it. So it cannot receive messages when closed and will lose all state when reopened.
There are two solutions to this:
You could employ a background page to hold state (if set to be persistent) and route messages between parts of the extension, e.g. a popup can request the current state when opening. This is an old-school solution.
If all you need is to pass/persist some data, you can easily employ chrome.storage.local to do it. You can save data with panel.js and react to changes with chrome.storage.onChanged event. The extra bonus is that when a popup reopens, it can simply read the storage to build its initial state.
So I recently implemented a chrome extension to grab images in an active tab and extract them to a popup for downloading. I would like to give users the option to view the popup window (including the extracted images) in a new Chrome tab.
However, since the popup is created dynamically by appending children to the body of my popup.html, I'm not sure how to pass the HTML for my popup to the new chrome tab.
I tried using chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});
as found at Open chrome extension in a new tab
but this doesn't seem to be working. Any suggestions?
I'm also developing a Chrome Extension that involves saving down a user's browser data.
Since each time an Extension opens a page (such as popup.html in your case) it opens a new instance of it, the pages and their relevant activity will be independent from each other.
In short you will have to implement some storage. The silver lining is it's pretty simple. Everything you need from manifest to example functions is here:
https://developer.chrome.com/extensions/storage
In your case what I'd imagine you'd want to do is this:
When you pass image urls to your popup page you also save them as items in an array in storage.
Then your pop up page can load in the array as the list to set downloading (or preview depending on use case).
Then either users can delete items from the array, or they are deleted programatically once downloaded.
I can't really be more specific without knowing exactly what your extension is trying to do or how it works, but hopefully that's enough to set you in the right direction.
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.