I am using MicrosoftTranslatorWidget to translate webpage,i want to translate webpage automatically by current location,Please help me.
Also you can share another api for translating webpage by current location.
<div id="MicrosoftTranslatorWidget" style="width: 400px; min-height: 20px; border-color: #404040; background-color: #A0A0A0;"><noscript>Translate this page<br />Powered by Microsoft® Translator</noscript></div> <script type="text/javascript"> /* <![CDATA[ */ setTimeout(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.charset = "UTF-8"; s.src = ((location && location.href && location.href.indexOf('https') == 0) ? "https://ssl.microsofttranslator.com" : "http://www.microsofttranslator.com" ) + "/ajax/v2/widget.aspx?mode=manual&from=en&layout=ts"; var p = document.getElementsByTagName('head')[0] || document.documentElement; p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script>
Microsoft no longer supports the translator widget.
To integrate Microsoft Translator in your website you have several options available:
The easiest and fastest one is to leverage Content Management Systems (CMS) that natively support the Translator API. For instance, Adobe Experience Manager (AEM) natively supports Microsoft Translator integration. From AEM you can integrate machine translation (with or without human post-editing added to the workflow) in your website development and deployment process. Learn more about AEM support for Microsoft Translator here: https://www.microsoft.com/en-us/translator/aem.aspx
Similarly, with solutions like WeGlot, you can add machine translation based localization to many popular content management systems: https://www.microsoft.com/en-us/translator/customers.aspx#textsearch=weglot .
Finally, you can also decide to integrate into your custom CMS the Translator API for either off-line or real-time webpage translations. Visit the Microsoft Translator Getting Started page at http://www.aka.ms/TranslatorGettingStarted and follow the steps outlined on the webpage to subscribe to the API.
Related
We want to create visual DAG workflow designer in our website. We found Camunda a good interface which can design BPM flowcharts. However, the documentation shows that we need to design workflow independently in Camunda designer.
Is there any way we can show designer in our website, in a way that designer looks like our website part, rather than a separate webpage itself?
If you can suggest any other better alternative to Camunda, we are open to explore. What we have seen, there is a lot of workflow engines available here, but not sure which one fits the need.
The Camunda modeler is basically Electron wrapped around https://bpmn.io/. You can use bpmn-js to include modelling functionality in your own page. It is as simple as shown on the bpmn.io website:
<script>
var viewer = new BpmnJS({ container: 'body' });
viewer.importXML(bpmnXML, function(err) {
if (err) {
console.log('error rendering', err);
} else {
console.log('we are good!');
}
});
</script>
I'm trying to port a simple Chrome extension to Firefox add-on/extension. The code for the Chrome Extension is:
manifest.json
{
...
"background": {
"scripts": [
"javascripts/background.js"
]
},
"chrome_url_overrides": {
"newtab": "main.html"
},
"permissions": [
"tabs"
]
}
main.html
<html>
<head></head>
<body style="margin: 0; padding: 0; overflow: none;">
<iframe src='http://google.com' width='100%' height='100%' frameborder='0' seamless></iframe>
</body>
</html>
javascripts/background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.update(tab.id, { url: 'http://google.com' });
});
In Firefox, I created a Firefox SDK-addon and I ended up with:
lib/main.js
var buttons = require('sdk/ui/button/action');
var tabs = require('sdk/tabs');
var self = require('sdk/self');
var pageUrl = self.data.url('main.html')
var button = buttons.ActionButton({
id: 'mozilla-link',
label: 'Googler',
icon: {
'16': './images/icon16.png',
'32': './images/icon32.png',
'64': './images/icon64.png'
},
onClick: handleClick
});
function handleClick(state) {
tabs.open('http://google.com/');
}
tabs.on('activate', function(tab) {
tab.url = 'http://google.com/'
});
but it's not working properly and I don't want the URLto be shown on the URL-bar.
I want to display a given website once the user opens a new tab. I don't mind if the user knows the actual URL, but I think that populate the URL-bar is kinda annoying since the user has to delete the URL (in this case google.com) in order to put a new one.
I want to have the same behaviour as usepanda.com. Their extension overrides the newtab page and shows the Panda website. Obviously, the user is aware of this behaviour when he downloads the extension.
How can I achieve the same functionality? I've thinking on using XUL and overlays, but I'm a bit lost.
After some questioning, we now know that what you want is: Make it such that a specific URL is opened whenever a user opens a NEW tab (i.e. a tab that is opened as a blank tab by the user, not one opened by the user following a link and specifying that the link be opened in a new tab):
There are many extensions that do this already. I suggest that you check the code for them. Personally, I use Tab Utilities, but it has much more functionality than you are looking for.
A very quick search on Mozilla Add-ons produced the New Tab Homepage which is very small and appears to do something very close to what you want as an overlay extension. On the other hand, it looks like Custom New Tab does exactly what you want. However, it is a Restartless/Bootstraped extension which makes it more complicated. Thus, I will show New Tab Homepage below.
As mentioned, New Tab Homepage is an overlay extension. I did not quickly see an extension listed that does this which was based on the Add-on SDK. Thus, this is not quite what you appear to have requested.
The code from New Tab Homepage:
Javascript (chrome/content/tabhomepage.js):
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is New Tab Homepage.
*
* The Initial Developer of the Original Code is
* Ben Basson <ben#basson.at>
* Portions created by the Initial Developer are Copyright (C) 2005
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Ben Basson <ben#basson.at>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
var newtabhomepage = {
init: function ()
{
gBrowser.removeEventListener("NewTab", BrowserOpenTab, false);
window.BrowserOpenTab = newtabhomepage.opentab;
// explicitly add new listener
gBrowser.addEventListener("NewTab", newtabhomepage.opentab, false);
newtabhomepage.prefs = Components.classes['#mozilla.org/preferences-service;1']
.getService(Components.interfaces.nsIPrefService);
},
opentab: function (aEvent)
{
// Firefox allows multiple piped homepages, take the first if necessary
var homepage = gHomeButton.getHomePage().split("|")[0];
var newtab = gBrowser.addTab(homepage);
if (newtabhomepage.prefs.getBoolPref("newtabhomepage.selectnewtab"))
{
gBrowser.selectedTab = newtab;
if (gURLBar)
setTimeout(function() {
// if page is about:blank select() works just like focus, two birds one stone
gURLBar.select();
}, 0);
}
if (aEvent)
aEvent.stopPropagation();
return newtab;
}
}
window.addEventListener("load",newtabhomepage.init,false);
To get what you want you can edit the JavaScript to make the assignment of the URL be to something static.
XUL overlay (chrome/content/tabhomepage.xul):
<?xml version="1.0"?>
<!--
***** BEGIN LICENSE BLOCK *****
Version: MPL 1.1/GPL 2.0/LGPL 2.1
The contents of this file are subject to the Mozilla Public License Version
1.1 (the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.mozilla.org/MPL/
Software distributed under the License is distributed on an "AS IS" basis,
WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
for the specific language governing rights and limitations under the
License.
The Original Code is New Tab Homepage.
The Initial Developer of the Original Code is
Ben Basson <ben#basson.at>
Portions created by the Initial Developer are Copyright (C) 2005
the Initial Developer. All Rights Reserved.
Contributor(s):
Ben Basson <ben#basson.at>
Alternatively, the contents of this file may be used under the terms of
either the GNU General Public License Version 2 or later (the "GPL"), or
the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
in which case the provisions of the GPL or the LGPL are applicable instead
of those above. If you wish to allow use of your version of this file only
under the terms of either the GPL or the LGPL, and not to allow others to
use your version of this file under the terms of the MPL, indicate your
decision by deleting the provisions above and replace them with the notice
and other provisions required by the GPL or the LGPL. If you do not delete
the provisions above, a recipient may use your version of this file under
the terms of any one of the MPL, the GPL or the LGPL.
***** END LICENSE BLOCK ***** -->
<overlay id="tabhomepageOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:nc="http://home.netscape.com/NC-rdf#">
<script type="application/x-javascript"
src="chrome://tabhomepage/content/tabhomepage.js"/>
</overlay>
chrome.manifest:
overlay chrome://browser/content/browser.xul chrome://tabhomepage/content/tabhomepage.xul
content tabhomepage chrome/content/
install.rdf:
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>{66E978CD-981F-47DF-AC42-E3CF417C1467}</em:id>
<em:version>0.4.3</em:version>
<em:name>New Tab Homepage</em:name>
<em:description>Loads your homepage when you open a new tab.</em:description>
<em:creator>Ben Basson</em:creator>
<em:homepageURL>http://www.cusser.net</em:homepageURL>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>3.0b2</em:minVersion>
<em:maxVersion>4.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
Preferences JavaScript (defaults/preferences/tabhomepage.js):
/* Focus newly created tabs */
pref("newtabhomepage.selectnewtab", true);
That is the entirety of the New Tab Homepage extension.
Using Jetpack you can reset the global like this:
var { get, set } = require("sdk/preferences/service");
var { when: unload } = require("sdk/system/unload");
var oldValue = get("browser.newtab.url");
set("browser.newtab.url", "http://somedomain.com" );
unload(function() {
set("browser.newtab.url", oldValue);
});
Firefox SDK preferences/service
You can do it like this:
var {Cu} = require('chrome');
Cu.import('resource://gre/modules/Services.jsm');
var newuri = Services.io.newURI('http://www.bing.com/', null, null);
Services.wm.getMostRecentWindow('navigator:browser').gBrowser.selectedTab.linkedBrowser.webNavigation.setCurrentURI(newuri);
To test it out open up scratchpad, go to menu bar, set it Environment to Browser, then run it, it will change your current tab to say bing.com
Is it possible to access google closure library functions from google app scripts via HtmlService? The html files in the google scripts seems to be filtering out anything related to closure library.
project: I am exploring DOM manipulation utilities from Google Closure library from within the google app scripts using HtmlService. I intend to run this as a stand alone web app.
The closure functions work when directly loaded into the browser from its local client environment - but they dont work when injected from GAS app via the HtmlService utility.
Here is the code I am using in the GAS.
html file
<html>
<head>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
function c_sayHi() {
var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},'Hello world!');
goog.dom.appendChild(document.body, newHeader);
}
</script>
</head>
<script>
function c_updateButton(date, button) {
button.value = "clicked at " + date;
}
</script>
<body onload="c_sayHi()">
<input type='button' value='Never Clicked'
onclick='google.script.run.withSuccessHandler(c_updateButton).withUserObject(this).s_getCurrentDate()'>
<input type='button' value='Never Clicked'
onclick='google.script.run.withSuccessHandler(c_updateButton).withUserObject(this).s_getCurrentDate()'>
</body>
</html>
Google Script file
function s_getCurrentDate() {
return new Date().toString();
}
function doGet(e) {
return HtmlService.createTemplateFromFile('hello').evaluate();
}
I have prefixed c_ to client side functions and s_ for server side fns. When running this as a web app,
Function c_sayHi has no effect - I am not sure if it is even invoked.
Functions s_getCurrentDate and c_updateButton work fine as described in google's documentation https://developers.google.com/apps-script/html_service.
Is there a way to get closure library working from the web apps as attempted above?
Couple of things here -
All .gs files is JavaScript that runs on the server side. So the DOM is not really relevant there.
You can run client side JavaScript by returning code in HtmlService. This is what I believe you want to do. However, jQuery is the best supported library on this approach. Closure might end up working but the team does not specifically test against that library.
The problem is that Closure's dependency structure is executing before the window load event, otherwise it will not work. So any require and provide statements are taken care of way before window load. When you inject them through the HTML Service, you are forcing their execution at a different stage then required, which causes everything to fail.
If you would be using a COMPILED Closure Library source, you will not have any problems with running Closure. Learn how to use the Compiler and Builder to make Closure Work properly. Also, you can use lazy loading to simulate your HTML Service.
With that, you can make javascript load dynamically onclick, onload or whatever the hell you want. This is called lazy-loading and it is used as a standard practice for all large web applications. Monitor the Network tab of Firebug when browsing through Gmail or Facebook.
Arun Nagarajan is right, jQuery is the easier solution but if you are doing something proper that requires breadth, scale and speed, jQuery is a toy for kids.
Here's the thing.
A two-way communication (RPC-style) is needed between JavaScript on HTML pages provided by a web server online (with session-management and whatnot) and a windows EXE application running on the PC of the website visitor.
Both are parts of the same 'package' and should be able to communicate.
There is the use of a custom protocol for sure, but some browsers like Chrome & Safari sometimes have issues with custom protocol handling, so it is not reliable enough ...
Another possibility is to build a minimal web-server inside the EXE, so the communication would work with all browsers.
It is possible to develop an extension / plugin for each browsers separately, but it's a daunting task..
The usage of flash / java seems not possible for this task because of sandboxing, but I'm not sure about this ??
Do you have any other ideas ?
You can use an embedded ActiveX (COM) object and communicate between both platforms. I've done it (and would not have believed it possible had I not). It's nasty but it works. In the project I used it on I had no choice (which is about the only reason to ever do this). I built the COM object in C#.net and exposed an interface to COM for use on the page. It goes something like this:
function doSomethingInteresting() {
// in your js:
var obj = document.getElementById('yourObjectId');
obj.MethodNameDefinedOnYourCOMObject("someParameterValue");
}
// and your HTML looks like this; note that you can even catch events thrown from the COM object in Js...
<body>
<form>
<object id="yourObjectId" height="0" width="0" classid="clsid:99999999-9999-9999-9999-999999999999" onerror="oError()" VIEWASTEXT></object>
<script for="yourObjectId" event="ThisIsTheJavaScriptEventHandlerMethod(parameterName)" language="javascript">
// event handling here for the COM object
function yourObjectId::ThisIsTheJavaScriptEventHandlerMethod(parameterName) {
// you can process the parameterName passed from the object here
}
</script>
</form>
</body>
Happy coding!
How do hosted services like UserVoice embed their content on other web sites?
I see that it is via including a JavaScript file from the service provider on your own page, however, what I'm interested in are the building blocks for creating a service like that.
For example, do they use a library like jQuery, mooTools, or prototypejs and how do they avoid namespace clashes?
Also wondered if there were any books, articles, blog posts that go over this specific use of JavaScript (not looking for general resources on JavaScript).
Regards and thanks in advance,
Eliot
Here is a great tutorial I found on How to build a web widget (using jQuery)
Generally, what you are describing is called a "Javascript Widget" (UserVoice's just happens to show up on the side of the page).
There is a good tutorial about creating Javascript Widgets that you can check out.
The basic structure of such an embeddable service would be:
If the service doesn't mandate that the script is to be included at the bottom of the page, hook the body onload event, without stepping on the toes of any existing handlers (by intercepting the existing handler function, which could in turn be chained to other functions).
Inject new HTML elements into the document. The HTML code would most likely be inlined into the script as string literals as setting innerHTML on a single injected element would be easier and faster than direct DOM manipulation using a flurry of function calls.
The entire script should live inside a closure to avoid name clashes.
A JS framework may or may not be used; caution is required when including a framework since it could clash with a pre-existing, different framework, or a different version of the same framework.
EDT: Generally you'll make your client/customer/friend include a script in their page, then via that script you can do following:
In pure JS you can load scripts from remote location (or not so remote) dynamically via
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'your/remote/scripts/path.js';
document.getElementsByTagName('body')[0].appendChild(script);
// $.getScript('your/remote/scripts/path.js'); in jquery but you'll be sure jQuery loaded on remote site
Then script you loaded can perform different actions like creating elements like this
var body = document.getElementsByTagName('body')[0];
var aDiv = document.createElement('script');
/* here you can modify your divs properties and look */
body.appendChild(aDiv);
// $('').appendTo('body'); for jQuery
For deeper look into JavaScript you can read for example Javascript: The Good Parts or Definitive Guide To Javascript.