How to change images in a chrome extension dynamically? - google-chrome-extension

I'm working on a chrome extension and I want it to change images everyday. How is it possible after I've published the extension? as in, do I have to update it with different images everytime?

You will need to host the image somewhere the extension can access. Preferably with CORS enabled, or you'll potentially run into issues.
It's important to only request it once and then somehow save it on your side (for example, as a data URI that you can store in chrome.storage).

Related

Configure chrome extension without making custom versions

I have a Chrome, Firefox and Edge extension that I want to configure to use a different api url depending on who is using it.
I don't want to create a new version of the extension every time with a different url.
What options do I have to do this? Ideally it would be set for a whole network of users instead of each user having to configure it.
I can think of a few ways:
Communicate with a native app (complex)
Use a few DNS addresses that could be set in the local network
Are there more options?

Load locally stored images through css with inspect element

I'm trying to redesign a small portion of vastly huge site and I was told that I can load custom images to Inspect Element (Chrome) if they are located in the same path as the stylesheet to which the site is remapped. (all done through css via 'content: url('...');') but the webpage is still looking for them in its own resources. So is there a way to use a locally stored image with Inspect Element?
When you're passing images in locally you can use, for example:
file:///C:/Users/[username]/Desktop/picture.png
So if I was to change a background image I would use
background-image:url("file:///C:/Users/Julia/Desktop/background.png");
But note that a lot of sites don't allow you to load local resources, so an error may appear in the inspect console when you try.
Actually, it only works with background instead of background-image (not sure if it works) but background without image seems to work. So put in:
file:///Users/[YourName]/Documents/picture.png
Like this:
background:url("file:///Users/[YourName]/Documents/picture.png")
I just decided to contribute because I just wanted to try it out myself as well and found this as the first answer despite the post being 2-3 yrs old; although for other users it might be helpful.
Also, this was done on Opera, but haven't tried it on other browsers, but it does work for me. Don't include the drive name. But you can simply copy the URL, by dragging the image into the browser (if it loads it) and copy the link. It should work (usually older browsers that don't auto-download the image).

Pass variable to chrome extension script when installing it from chrome webstore

I am making an extension that should include in its background script some variable that should be unique for every user and that must not be altered. I was able to soolve this in Firefox since it is possible to generate the extension package inline and install it with not problems.
As far as chrome is concerned, I cannot rely on cookies, session or localstorage since the can be erased if the user deletes his browsing history.
Then my question is very simple, is it possible to pass the variable when installing the extension from chrome webstore using a link lik this for example :
https://chrome.google.com/webstore/detail/search-by-image-by-google/dajedkncpodkggklbegccjpmnglmnflm?id=somevar
YOu may use Sync Storage in Chrome: https://developer.chrome.com/extensions/storage
It use Google Drive in background to store data. Even if the user clear browser data it will remain intact.
The user will not see this data on Drive because they are not visible in the drive's UI (files are hidden) so probably he will not be able to delete it.
However you must consider a situation when the user is not logged in to Chrome or the user disabled sync options. In this scenario storage.sync will behave like storage.local.
Even when the user clear browsing data, the data stored in storage.local will remain. They will be deleted only on uninstall.
Edit:
Data are stored on Google Drive using syncFileSystem API - not storage.sync. However it doesn't change the solution I wrote.

Reading and writing files in chrome extensions

I am trying to write a chrome extension that initialize some parameters from a config file.
I would like to allow the extension to change those parameters and save them to the file so that the next time the extension was loaded it uses the new configuration.
I have been reading the chrome.filesystem api but it needs the interaction of the user to choose the file. However in this case the process must be done automatically without any action of the user.
Since this configuration file will be only accessed by the extension it could be sand-boxed but It must be persistent even if chrome is closed.
I manage to read the file using an XMLHttpRequest but I could not find a way to modify the file.
Is it possible to do this from a chrome extension?
This is an old question but unfortunately the only response it got was wrong.
It's definitely possible to read and write files using HTML5 in Chrome, without the vague "security" issues mentioned. The HTML5 Filesystem creates a protected sandbox in which you write and read virtual files: you can think of it as files being written in file based database managed by Chrome and not accessible by either other Chrome apps & extensions or other OS based applications. The user won't be able to copy or move these files using his OS file explorer since they reside inside the web browser's file DB.
You can't read (or write) arbitrary files from (to) disk based on any given file path.
If you need a file from disk you can only let the user select it himself by using chrome.fileSystem.chooseEntry()
You can however read (and write) your own files from (to) the HTML5 Filesystem.
So to answer your question: no you don't need user interaction to write your config file to the browser's file system.
An alternative to files could be chrome storage, localstorage or even indexedDB to store your (persisted) config key-value pairs.
Here are a couple of useful links to start reading about it:
Toying with the HTML5 filesystem
HTML5 Rocks
HTML5 demos
I imagine allowing a chrome extension to write to config files without the user knowing could be a bit of a security problem. You're probably hitting up against a security feature. A potential work around is to build a desktop application that is always on, and your chrome application communicates with it. Heck, you might able to do what you need to (without knowing all the details) with something like autohotkey.

How to detect in advance if a browser will download a file instead of viewing it?

Sometimes when you view a file on a page on its own, the browser has some default way of viewing it, like to place it in an image or video tag, or invoke some plugin. Other times, it just downloads the file.
Sometimes this is because of headers set by the server, but lets ignore that for now. For some file types, it doesn't matter what headers were set -- the browser will try to download them regardless.
Some of the types that the browser will view are listed in navigator.mimeTypes. However, this is not authoritative. The iPad can view Microsoft Office files but it does not report this.
Is there any simple way to figure out what the browser is going to do with a file before it does it?

Resources