I am working on a chrome extension and I am stuck. I am not sure if this is even possible but this is what I need to have done. Basically the user click on the chrome extension and panel opens up (popup.html). The user is shown a list of images from the web and the user can select the ones they want to edit. popup.html loads popup.js. popup.js contains functions and inside those functions are some variable. Now there is a button in popup.html that takes you to another panel called filters.html. This is where editing goes. I am trying to pass the selected images from popup.html to filters.html and I am trying to call that array of images that was gathered in popup.js when popup.html loaded but its null. What is wrong is this even possible? When a new html page opens up does that mean it loses track of what happened in the last html page and therefore it loses also track of whatever .js files ran in that same page?
A new and better way is to use chrome extension storage. You can store the data from one page and u can read it in other page as data will be stored in chrome itself. Hope it helps
Related
So, I've got a situation where I want a background and content script to be run everytime the browser extension icon is clicked. The ideal behaviour is that extension icon is clicked, the script runs, and the popup will open, displaying the data that was grabbed by the script (but this should happen quickly, the script runs and gets the data very fast). Since chrome.pageAction.onClicked will not work if there is a default_popup defined in manifest.json, I think this leaves me with two options:
Use default_popup and figure out that the extension icon has been clicked some other way. I found this solution in another stack overflow post, but the workaround is to use default_popup: "popup.html", and then the popup.js that is defined in popup.html will send a message saying that the icon has been clicked, then when background.js receives this message, it executes the script. I implemented this idea and it worked... kinda. The trouble is, the popup will always come up before the script is fully executed, so you can't actually display the data grabbed by the script in the popup until the next click. I'm not sure there's any way to get the behaviour I desire using this method, so on to the next:
The other solution I can possible think of is to use onClicked, and then make the popup come up some other way, besides using default_popup in manifest.json. I'm also not sure if this is possible, I have looked on stackoverflow and haven't found anything similar.
Is the second method possible? Can the first method work somehow?
Your option #1 is correct, I think all that is needed is a loading screen when the user first sees the popup, and add some code that updates the popup as soon as it hears from the backend. Might need to see some code to better help there.
Option #2 will not really work, unless you opened the popup in a new tab (or just made it a whole new HTML page). I say this because there is a note here from the Chrome Dev team they will not support opening a popup unless it is from a user gesture -- https://stackoverflow.com/a/10484764/4875295.
If you wanted to go that route it would probably look something like:
Delete from your manifest.json browser_action.default_popup
In your background script add something like:
chrome.browserAction.onClicked.addListener(() => {
const data = dataMaker();
chrome.tabs.create({
url: `${chrome.runtime.getURL("app.html")}?data=${data}`
});
});
Then in your html file have some JS that reads the query string and updates the page accordingly.
Though, that's a different approach than you asked for and I think your original route may still be the best bet (with some added JS around loading).
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'm trying to build a chrome extension which stores links that I press while holding down shift and alt. This is my first chrome extension, and if I'm not mistaken, the way I'm supposed to do this is have a background.js which does the event handling for when I click on a link. Then, when I click on the link, I want popup.js to access that link somehow and display it on the page for later use. What would be the best avenue for this? Should I use localstorage, store the link in there, then when I open up popup.html have popup.js access it through localstorage and grab it to display it? Is there any way to have them directly communicate with each other?
You can directly access any methods/objects declared at background.js using chrome.runtime.getBackgroundPage.
Check http://developer.chrome.com/extensions/runtime#method-getBackgroundPage for additional information.
I'm developing a custom module for Drupal dealing with Document Management. At this point, the module loads, you can upload files (via a hidden iframe and some ajax requests), browse directories and set various levels of permissions. And everything works perfectly in Firefox.
Issue:
In IE however, I run into an issue. For some reason when I upload a file the save file dialogue pops up and asks me to download the file I just uploaded. It looks like it's asking me to download it from the web-servers tmp location however, as that seems to be the file-name and such. However, if I hit cancel and refresh the page I can see that the file I uploaded did actually get uploaded to the server.
Here is how the upload process works. Click the upload button. The upload button is the standard file input form element hidden and placed over a styled version of the button. Clicking on this causes the "Choose a file" dialogue to open.
Select a file and click "Open". A modal dialogue pops up asking you for some further information about the file. The modal is part of the same form element but remains invisible until you click Upload button
Clicking save in the modal causes the file to be uploaded. The "action" attribute on the form is pointed to a page and the target is the iframe.
The iFrame is polled a few times every second to see if it's contents have changed. When the file is uploaded a "success" message appears in the iframe. Since it belongs to the same domain, I scrape the content within the iframe.
Once the iFrame says that the file has been uploaded, I use some JS to update the application with the name of the file
Since I can't use Firebug in IE, I have to stick to utilizing Microsofts Web Developer Toolbar, which makes it very hard to figure out if the bolded step is actually occuring. It seems like it should, since the file IS being uploaded. It is just getting interrupted by that file download dialogue.
Since no one seems to have an answer, I'll post the fix I found. I doubt it's perfect, but it's the best solution I could come up with.
It turned out to be an issue with the polling as suspected. The fix ended up being instead of outputting json to the iFrame, just output some JavaScript that calls a function that updates the main window. That simple.