Webextensios expose Javascript APIs under browser namespace. For example browser.topSites() in Javascript will return list of top visited sites as returned by the broswer.
I am interested how does this talk internally to browser object (presumably a C++ class) to call the appropriate method to get the list of top sites probably stored in some SQL Lite database.
So how does a call from Javascript map to appropriate C++ call architecturally?
There are JavaScript APIs made for this purpose.
JavaScript APIs for WebExtensions can be used inside the extension's
background scripts and in any other documents bundled with the
extension, including browser action or page action popups, sidebars,
options pages, or new tab pages. A few of these APIs can also be
accessed by an extension's content scripts (see the list in the
content script guide).
Update on comment:
Firefox has its own SpiderMonkey: The Mozilla JavaScript runtime
Related
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.
I am trying to load Here maps library in lightning component but on load page is throwing below error.
[Cannot read property 'Object' of undefined]
eval()#https://wellmanage--onbdev.lightning.force.com/resource/GRG_Leaflet/GRG_Leaflet/Here-mapsjs-core.js:6:1666
Proxy.eval()#https://wellmanage--onbdev.lightning.force.com/resource/GRG_Leaflet/GRG_Leaflet/Here-mapsjs-core.js:320:26
According to the stack trace and error, it looks like the HERE scripts are loaded in an environment which doesn't have access to the JavaScript window object, and therefore cannot be evaluated properly.
I'm not familiar with Salesforce Lightning, but it should be possible to execute JavaScript code as their documentation states:
A component bundle can contain JavaScript code in a client-side controller, helper, or renderer. Client-side controllers are the most commonly used of these JavaScript resources.
However, it seems there is a peculiar way to load external scripts, which is described on this page. In particular:
The framework’s content security policy mandates that external JavaScript libraries must be uploaded to Salesforce static resources. For more information on static resources, see “Static Resources” in the Salesforce online help.
So lets say you have a React-based mobile web app, that takes advantage of server-side rendering for the initial view ( for speed + SEO reasons ). There is no "index.html" file - the index file is dynamically built server-side and returned in the initial response.
Now lets say you want to add PWA functionality to that app. You hook up a service worker to cache assets, etc.
One of the core tenants of PWA's is that they provide an offline experience. Say we just want to show a refresh page, "You're offline, click here to refresh", when the service worker detects the user is offline.
Online examples provided by google talk about using an App Shell -- a static HTML file, which can be cached by the service worker on initial visit, and which will be the "shell" your react app lives inside. This shell ties in to showing an "offline" view.
How does this work with server-side rendering, where there is no "shell" html file, and each route can potentially return a different index.html file?
Any demos or examples of this functionality in the wild?
Any demos or examples of this functionality in the wild?
Yes!
Take a look at https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which uses the dynamicUrlToDepndencies option in sw-precache to define which underlying resources are used to server-render the App Shell HTML.
The service worker it generates will take care of updating the App Shell HTML whenever any of the resources it depends on changes.
In this model the service worker will return the same App Shell HTML document for all navigation requests, so it assumes that the App Shell HTML is generic enough to then be populated at runtime with the dynamic content that's associated with the actual URL via your standard client-side routing logic.
I am using angular-translate in my angular application.
I have set default language to German using
$translateProvider.preferredLanguage('de')
I am also using $translate.use(langKey) which sets the languages at runtime.
But when i sets the language to english at runtime and then after that when i reload the page it sets the language again to German. what i want is that
After a refresh the page should be loaded in the language that it was set to before.
Is there something in angular which i can use or I have to write my own logic to implement the above.
There are already some implementations for storing the chosen language built into angular-translate (via add-on modules). Have a look at https://angular-translate.github.io/docs/#/guide/10_storages which provides built-in solutions for cookies and localstorage. Dealing with this manually is not that trivial as it looks at first sight.
With the module it is as easy as dropping in one javascript file and adding the following call when configuring the translate provider:
$translateProvider.useLocalStorage();
you can use localstorage to keep the value in the cache, just inject the service $window in your controller and use this sintax:
$window.localStorage.setItem('lan', 'en');
the cache keep the value even after the browser is closed.
When you update the page just check if the key is present.
if($window.localStorage.getItem('lan') === 'en'){
//do something
}
Local storage is bound to a specific domain,
You can see use the tab resources of the chrome web tools to check the existing key-value pairs
more info in the doc
https://developer.mozilla.org/it/docs/Web/API/Window/localStorage
I am creating a single page app (mobile/desktop) using AngularJS. Based on the limited knowledge I have of AngularJS, I think the routing for the apps/websites is based on urls and $location/$location.path directive is used. However, in mobile or desktop apps, there is no browser. So how does AngularJS routing work in this case if views need to be switched?
Thanks
If you are talking about an Angular application by itself, it will always need something to be interpreted by something. Angular is written in JavaScript which means it will have to be interpreted by something which understands JavaScript. I am using the word interpreted instead of compiled, because JavaScript is not a compiled language.
But then how does something that interprets JavaScript display it on my screen you ask? For this you'll need a bit of background information.
The DOM
This is where we got to the Document Object Model DOM. From W3c:
The Document Object Model is a platform- and language-neutral
interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents. The document
can be further processed and the results of that processing can be
incorporated back into the presented page. This is an overview of
DOM-related materials here at W3C and around the web.
To dumb the quote above down:
you have a document (web page) which is being displayed and the DOM allows you to change this document which is being displayed.
JavaScript Engine
The link between JavaScript and the DOM is provided by an Engine. Every browser uses a JavaScript Engine. For example Chrome uses the V8 JavaScript engine. From an introduction of V8:
JavaScript is most commonly used for client-side scripting in a
browser, being used to manipulate Document Object Model (DOM) objects
for example. The DOM is not, however, typically provided by the
JavaScript engine but instead by a browser. The same is true of
V8—Google Chrome provides the DOM. V8 does however provide all the
data types, operators, objects and functions specified in the ECMA
standard.
How does this translate to your question?
Everything that wants to display a JavaScript application, needs to have a JavaScript Engine and a DOM. This could be a browser like Chrome, but could also be any other application.
A simple explanation of what a router does, is change the DOM to display different "documents". So plainly said: any application, be it a mobile or desktop application, which has a DOM understands how to use Angular's routing system.
Outside the browser means only application you are speaking about?. angular is tied to HTML pages in general. So its a framework for managing(not exactly appropriate word) the html pages to make them into Single Page Applications so that browser does not need to reload the entire the web application on request of a single page, it helps to invoke the html pages into the main html pages, this makes the application not to reload the entire, but to make available requested pages. this is where the routing comes.
Angular will work just fine there. In fact there is an Ionic project that is based on top of angular. E.g. if you are using Cordova, then the app is rendered inside a browser (or at least with the browser engine). So as far as I know it will behave exactly the same way with the exception of user not being able to type in URL or click back/forward.
Moreover I build an application for browser where I do not user URL as much as possible. E.g. I transition only between states and don't have direct url's in my application at all. Of course I need to support to the extent that a user can type in the url, but the ui-router does that on it's own if you map routes properly. But it seems much more beneficial not to rely on the urls at all for SPA (for internal stuff as you still have the edit url as I said before).