i'm developing a chrome extension which requires to get the values(to plugin) from local storage where values are stored by some other webpages that were created by me
In short: Access a webpage's localStorage from a Chrome extension script
I just tested it, and if you access localStorage from the context of a content script, you get the webpage's localStorage. So, nothing special is required besides injecting a content script into the webpage you need.
To communicate the value from the content script you can use Messaging API, and you can use chrome.storage.local API to save data in a way that's accessible from both the content script and the background page.
Related
I have developed a chrome extension, now I want to send some data from my extension to my website. I don't want to use backend as in this example: Send Data from chrome extension to Node.js
I want some way I can get the data in my frontend, my website doesn't have a backend. Your help is appreciated.
As commented by wOxxOm by using content script as stated here: How to access the webpage DOM rather than the extension page DOM? we can access the DOM of our webpage and make changes and send data to it from our chrome extension.
I wrote a webapp that I use to store various information locally using Local Storage in Firefox. I want to run the webapp in Chrome or another brower using the same local storage data. Is that possible? If not, is it possible to copy the local storage data created by the webapp in Firefox to a file that can be used by the same webapp in Chrome?
localStorage is a storage on client side(web browser), you can't share localStorage of one browser with other.
Although you can copy localStorage content by running given javascript in browser console
copy(JSON.stringify(localStorage));
it'll copy all localStorage content to clipboard.
Now, you can import it into another browser by running given javascript in console
var data = '/*paste stringified JSON from clipboard*/';
Object.keys(data).forEach(function (k) {
localStorage.setItem(k, data[k]);
});
I'd like to run a gulp task that populates my app with sample data from localStorage. It looks like I can't access localStorage from gulp, is this possible/is there another way of doing what I want to do?
It's not easy, but it can be done with a mix of gulp and javascript. You will have to create an javascript page to populate the localstorage. Just keep in mind the localstorage is domain specific (protocol, domain, port).
Here's what you'll have to do:
create a gulp task to open a browser tab (make sure it's the same domain as your app)
point browser tab to the html page (containing the script) to populate the localstorage
localStorage is a browser feature. The API itself is only implemented there, and the data is stored in the browser profile alongside cookies, in a browser-specific format, handled by an entirely different Javascript VM.
So no, there's no way to change data specific to a browser session from node.
You could have gulp generate a bit of code to setup localStorage and inject that into your page, so it populates the storage as soon as you load the page, but it's hard to provide a generic response here.
I am writing a Chrome App that communicate with a web page. For that I have added something similar in my manifest file.
"externally_connectable": {
"matches": ["*://*.example.com/*"]
}
But the "example.com" has to be dynamic as individual customers has their one web server.
Is there any possibility, user(who install the app) can change the externally_connectable site/s.
There is an alternative way a web page can communicate with extension through content script. This approach can be used if both web page and extension are done by you.
E.g.
web page <--> content script of extension <--> background script of
extension <--> native application
For web page to content script of extension communication use window.postMessage and window.addEventListener
For Google Chrome browser,
For content script of extension to background script of extension communication use chrome.runtime.sendMessage and chrome.runtime.onMessage.addListener
For background script of extension to native application communication use chrome.runtime.sendNativeMessage
Please make sure your code has necessary security in place.
As far as I know the "externally_connectable" is the only official way to send messages (With data) from a web page as mentioned here
This requires a predefined values for every single domain. But what if you want to make only one extension to accept messages from any web page?
If you just want to notify the other side about some thing, you can use the native JS Event dispatching it on the document from one side and listening to it at document also from the other side as the document is shared between the extension content script pages and the web page.
You can't use JS CustomEvent to send data as every time you send data, you receive it empty as a result of sandbox effect of any extension.
If you want to share data so the only workaround I know so far - after spending about one month developing an extension - is to have a combination between some sort of a storage and the JS native Event mechanism.
The solution in steps (suppose you need the web page to send some data to the extension):
Make an event on document from the web page.
Save the data temporarily inside any storage technology you prefer
(localStorage, the DOM itself, or what ever..)
Receive the event at the other side (extension) by listening on the
document.
Read data and remove it.
Hope this helps someone or open a door for a discussion on a better way doing this.
I am developing Filemaker application that uses web viewer.
I need to access to DOM or Window object inside web viewer control so that I can send some messages(or trigger predefined events) to web page from Filemaker.
So the goal is to make web page inside web viewer control get some data that Filemaker sends at any time. Web page is a local html file of which URL starts with file:///.
Is it possible to do this or is there another way to accomplish this task?
It's much easier to send a message from the web viewer to FileMaker using the fmp url protocol (which you can use to e.g. call a script in FileMaker from Javascript).
You can't send a message directly to the web viewer from FileMaker. Your best bet is to set a variable on a service somewhere and have the web viewer poll that service to see if the value changes.
"This task" is not well-defined, IMHO. What exactly are "messages" or "predefined events"? You certainly can use the Set Web Viewer script step to make the web viewer load another URL at any time you wish to.
Note also that you can use Data URI to load data into the web-viewer directly, without requiring an external HTML document.