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.
Related
I have a page with a few links.
Each link opens in a new tab.
The next time I click a given link, I want it to recall the same tab where it was previously opened.
Is it possible? How?
All pages come from the same domain.
I've seen this answer:
Check if my website is open in another tab
It seems possible to store the URIs in localStorage, for repetitions detection.
I think this technique will allow me to detect repetitions, but I can't figure out how to aim at the specific tab (activate it, bring it to the front).
I don't control the server, need to implement it in the client (via Tampermonkey).
For the curious, I work a lot with BitBucket issues.
The page with the links is the issues listing, the other pages are the individual issues.
I want to be protected from opening the same issue twice, update both versions, and have a data loss.
Additionally, each page can have two different URIs, one for viewing and the other for editing. But I think I can solve it with JS.
Recalling a Browser Tab by Name
You can first specify a name for each tab you create, by using window.open():
let newWindow = window.open(newUrl, newWindowName);
or by using target attribute in an anchor tag:
Make New Window
If you then call window.open with the name of an existing tab, that will use the existing tab. If the window by that name doesn't exist, window.open will create a new window (or tab).
MDN web docs page for Window.open
Bringing Window to the Front
Using window.open() alone may not be enough to bring the window to the front. That may be possible with a different function, window.focus(), which issues a request to bring the window to the front. Combining the two:
window.open(myUrl, myWindowName).focus();
Caution: A browser's user preference setting may still prevent focus() from bringing the window to the front, so this is not guaranteed to work. From MDN web docs:
It may fail due to user settings and the window isn't guaranteed to be frontmost before this method returns.
You can get the previous page's URL with the following:
let prevURL = document.referrer;
You can get the URLs from all open tabs with the windows.getAll() function.
From this answer - You cannot programmatically focus the browser to a specific tab due to security concerns. Consider updating the title to notify the user with document.title = {{new title}}
I do not want the webpage to reload if its already open, as this causes unnecessary data to be sent to the javascript application.
If the webpage is not open, I want it to be open.
If the webpage was open but the user used teh tab to load another webpage, i want a new webpage to open,.
If the webpage is open and still on the right url, I do not want any change, I do not want it to refresh.
However I can not seem to find a way to know if the url changed.
I can use cookies if i have to but would rather not. Any suggestions?
Thanks.
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.
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
i came across this script on the web:
javascript:(function(){function I(u){var t=u.split('.'),e=t[t.length-1].toLowerCase();return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[e]}function hE(s){return s.replace(/&/g,'&').replace(/>/g,'>').replace(/</g,'<').replace(/"/g,'"');}var q,h,i,z=open().document;z.write('<p>Images linked to by '+hE(location.href)+':</p><hr>');for(i=0;q=document.links[i];++i){h=q.href;if(h&&I(h))z.write('<p>'+q.innerHTML+' ('+hE(h)+')<br><img src="'+hE(h)+'">');}z.close();})()
And it fairly opens up all the images of a tab whose address bar you run the script in, in a new tab.
But that new tab, opens up as an about:blank tab, and when i press Ctrl+S to download the page, and hence thereby getting all the images opened in that tab, what i hope would happen doesn't.
Ctrl+S doesn't work on about:blank, and i kinda hoped there would be some way to download those images opened in this kind of tab. How do i do this? Is there any way in JavaScript to achieve this?
i searched around the web, and found wget, but i didn't really get it. Is there any easier way altogether to just download images from a tab using javascript?