How does one detect a spelling mistake inside a textarea in JavaScript? Is there an event associated with this? How do I access Chrome's spell-check suggestions for a misspelled word?
How do I access Chrome's spell-check suggestions for a misspelled word?
To the best of my knowledge, you cannot. To answer more fully, I'll also mention related issues:
There was once an unofficial Google spell-check API that has disappeared
You can download but not access Chrome's built in dictionary
There is no open API for Google's dictionary
Is there an event associated with this?
No, nor does the contextmenu event provide anything useful for this purpose: it has no spell-check information and you cannot read the list of context menu items (which may contain spelling suggestions). The change event also doesn't provide spell-check information.
How does one detect a spelling mistake inside a textarea in JavaScript?
You can either code this yourself or use a third party library. There are other Stack Overflow questions on this topic or you can search for yourself. Related Stack Overflow questions include:
Javascript Spell Checking Methods
javascript spell checker recommendations
Javascript based spell-checkers for web applications
Add spell check to my website
Need Client side spell checker for DIV
javascript spell checking
As the question seems a bit broad and open to interpretation (especially with the current bounty-'requirements'), I'll start by explaining how I interpret it and try to answer the subquestions in the process (Q/A style).
You seem to be asking:
"Google Chrome"/"Chromium" specific:
Q: if browser "Google Chrome"/"Chromium" exposes a spellcheck-API that you can interact with through the use of javascript in a common webpage
A: No, not really (at least not in the way you'd want).
There is a Chromium-specific Spellcheck API Proposal (from dec 2012).
Here are some parts of it:
Could this API be part of the web platform?
It is unlikely that spellchecking will become part of the web platform.
More importantly, it has only one method called 'loadDictionary':
loadDictionary( myDictionaryFile // string path or URL
, dictionaryFormat // enumerated string [ "hunspell" (concatentation of .aff and .dic files)
// , "text" (plain text)
// ]
) // returns int indicating success or an error code in loading the dictionary.
The point? Helping the community create custom dictionaries for Zulu, Klingon, etc. because approximately 20-30% of Spellcheck bugs-rapports were regarding unsupported languages.
Now let's not confuse Chrome's SpellCheck API (above) with Chrome/Webkit's SpellCheck API (hu? say what?):
Hironori Bono (a software engineer for Google Chrome) proposed an API around 2011 and some related bug rapports and a patch that was(/is still?) in Chrome.
void addSpellcheckRange( unsigned long start
, unsigned long length
, DOMStringList suggestions
// [, unsigned short options]
);
void removeSpellcheckRange(SpellcheckRange range);
Usage example:
var input = document.querySelector('input');
input.addSpellcheckRange( 4
, 9
, [ 'Chrome'
, 'Firefox'
, 'Opera'
, 'Internet Explorer'
]
);
Sources:
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42 ,
http://peter.sh/experiments/spellcheck-api/ (you should be able to try it live there IF this API still works..)
The point? After contemplating over this a couple of day's it suddenly clicked: custom spell-check integration with the browser - using the browser's context-menu instead of blocking it and providing your own. So one could link that with an existing external spell-check library.
Above historical and experimental API's clearly never directly supported what you want to accomplish.
Q: if "Google Chrome"/"Chromium" spellcheck-API exposes an 'onSpellError' (-like) event on (for example) a textarea
A: As outlined above, it appears that Chrome doesn't have such an event.
HTM5 currently only exposes the ability to enable or disable spell-checking on spellcheck supported elements.
Q: how to access Chrome's spell-check suggestions for a misspelled word
A: As outlined above: it appears that you can't. It appears to be the same answer as for the almost duplicate-question: How can I access Chrome's spell-check dictionary?
It might be interesting to note that "TinyMCE's spellchecker was previously provided by 'hacking' a Chrome toolbar API owned by Google, against Google's own legal usage policies. This spellchecking service has been discontinued permanently.". Now if you search the web you probably can find how they did that, but it certainly doesn't seem the best way to go about it (and advocate it here).
Using javascript spell-check libraries you could however use Chrome's dictionaries (so you wouldn't need to maintain the dictionaries) but you would have to supply and ship these files together with your web-app (instead of fetching the installed ones in the browser).
General:
Q: How to detect a spelling mistake inside a textarea in JavaScript
A: Internet Explorer allows using the spellchecker
integrated into Microsoft Word via ActiveX as listed in the following
code snippet.
function CheckText(text) {
var result = new Array;
var app = new ActiveXObject('Word.Application');
var doc = app.Documents.Add();
doc.Content = text;
for (var i = 1; i <= doc.SpellingErrors.Count; i++) {
var spellingError = doc.SpellingErrors.Item(i);
for (var j = 1; j <= spellingError.Words.Count; j++) {
var word = spellingError.Words.Item(j);
var error = {};
error.word = word.Text;
error.start = word.Start;
error.length = word.Text.length;
error.suggestions = new Array;
var suggestions = word.GetSpellingSuggestions();
for (var k = 1; k <= suggestions.Count; k++) {
error.suggestions.push(suggestions.Item(k).Name);
}
result.push(error);
}
}
return result;
}
Source: https://lists.w3.org/Archives/Public/public-webapps/2011AprJun/0516.html
But IE/ActiveX/MS-Word isn't really what you have asked for, neither is it very cross platform/browser, that leaves us with local javascript spell-check libraries:
Javascript Spell Checking Methods
http://code.google.com/p/bjspell/
http://www.javascriptspellcheck.com/
http://ejohn.org/blog/revised-javascript-dictionary-search/
Etc.
Comparing/explaining them is really outside the scope of this answer.
It is worth noting what format of dictionary you wish to use!
Alternatively one could use an external spellcheck API service (where a server handles the data and you'd communicate with it using AJAX).
Obviously you'd need to take privacy matters into account!
The bounty-'requirements' ask for:
Q: definitive proof
A: I should have found something more regarding the subject than some esoteric experimental features. Neither do I see libraries that try to shim their functionality into some (upcoming) standardized method/event identifiers etc.
As noted, popular libraries like TinyMCE also currently have no other solution.
In the 'living standard'/'the world is our playground' mentality my answer could very well already be outdated when I press the 'submit'-button. But even then I wouldn't recommend such an experimental feature in the near future on a 'production' level website/interface.
Q: and obtaining a good answer explaining how to achieve this
(chrome specific or in general? Spell-check suggestions or detecting that there is a typo?)
A: Other than the above, I can't think of anything (other than libraries that web-developers currently use (see 4)).
Hope this helps!
There is not an API for accessing Chrome's spellcheck suggestions, nor are there natively any events fired when words are mistyped. However, events could be implemented.
I have no idea what your use-case is for this functionality, but I put together a demonstration using montanaflynn's Spellcheck API on MashApe. The demo watches a text area, and when the user pauses typing, it sends the text via the API to be tested. The API returns JSON containing the original string, the suggested corrected string, and an object containing the corrected words and their suggested replacements.
The suggestions are displayed below the textarea. When suggestions are hovered, the mistyped word is highlighted. When clicked, the typo is replaced with the suggestion.
I also added a shuffling function, that scrambles the words in the string before sending it, to add a layer of privacy to the use of the API (it uses SSL also). Neither the API nor Chrome use context-based suggestions, so the shuffling doesn't alter the results.
Here's a link to the CodePen: http://codepen.io/aecend/pen/rOebQq
And here is the code:
CSS
<style>
* {
font-family: sans-serif;
}
textarea {
margin-bottom: 10px;
width: 500px;
height: 300px;
padding: 10px;
}
.words {
width: 500px;
}
.word {
display: inline-block;
padding: 2px 5px 1px 5px;
border-radius: 2px;
background: #00B1E6;
color: white;
margin: 2px;
cursor: pointer;
}
</style>
HTML
<textarea id="text" placeholder="Type something here..."></textarea>
<div id="words"></div>
JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
;(function(){
"use strict";
var words = document.getElementById("words"),
input = document.getElementById("text"),
timeout, xhr;
input.addEventListener("keyup", function(e){
if (timeout) clearTimeout(timeout);
if (!this.value.trim()) words.innerHTML = '';
timeout = setTimeout(function() {
var test_phrase = shuffle_words( input.value );
spell_check(test_phrase);
timeout = null;
}, 500);
});
function shuffle_words(inp) {
inp = inp.replace(/\s+/g, ' ');
var arr = inp.split(" "),
n = arr.length;
while (n > 0) {
var i = Math.floor(Math.random() * n--),
t = arr[n];
arr[n] = arr[i];
arr[i] = t;
}
return arr.join(' ');
}
function spell_check(text){
if (xhr) xhr.abort();
xhr = $.ajax({
url: 'https://montanaflynn-spellcheck.p.mashape.com/check/',
headers: {
'X-Mashape-Key': 'U3ogA8RAAMmshGOJkNxkTBbuYYRTp1gMAuGjsniThZuaoKIyaj',
'Accept': 'application/json'
},
data: {
'text': text
},
cache: false,
success: function(result){
xhr = null;
suggest_words(result);
}
});
}
function suggest_words(obj){
if (!obj.corrections) return;
words.innerHTML = '';
for (var key in obj.corrections) {
if (obj.corrections.hasOwnProperty(key)) {
var div = document.createElement("div");
div.className = "word";
div.innerHTML = obj.corrections[key][0];
div.orig = key;
div.onmouseover = function() {
var start = input.value.indexOf(this.orig);
input.selectionStart = start;
input.selectionEnd = start + this.orig.length;
};
div.onmouseout = function() {
var len = input.value.length;
input.selectionStart = len;
input.selectionEnd = len;
}
div.onclick = function() {
input.value = input.value.replace(this.orig, this.innerHTML);
this.parentNode.removeChild(this);
}
words.appendChild(div);
}
}
}
})();
</script>
I only used jQuery to simplify the AJAX request for this demonstration. This could easily be done in vanilla JS.
You can disable internal browser spellcheck and integrate any other opensource spellcheck library, for example
JavaScript SpellCheck. It contains all events you may need for deep integration, check the API page.
Related
Is it possible for an overlay add-on to get its own name & version without using the AddonManager?
In an overlay add-on, the add-on ID is not automatically provided (like a bootstrapped add-on) and thus has to be entered manually in order to use the AddonManager. At the moment, I parse install.rdf for the data.
Is there any alternative method of getting above data?
The official API to query add-on information is the AddonManager. Anything else are just hacks or work-arounds.
Parsing install.rdf for the name is such a hack and has its own problems: The add-on manager may have retrieved e.g. an updated name from an online source, e.g. the addons.mozilla.org website, and as such the install.rdf-provided name would be outdated and disagree with the name about:addons would show.
I'd argue that normally and add-on should know it's own ID. But I recognize that there might be some code meant for reuse (like frameworks) where it would be bad to hard-code the id, i.e. edit the file meant for reuse.
In such cases, parsing install.rdf (or some other configuration file) to get the id to be used when querying AddonManager might be a viable alternative.
There is also the (undocumented on MDN) AddonManager.mapURIToAddonID API, which is used internally to map memory measurements to add-ons in about:memory, but which could also be used instead of parsing install.rdf, I guess.
Ok how about this?
Do you know the name of your addon?
Components.utils.import("resource://gre/modules/AddonManager.jsm");
AddonManager.getAllAddons(function (addons) {
var cnt = 0;
console.log(addons)
for (var i = 0; i < addons.length; i++) {
if (addons[i].name == 'Adblock Plus') {
console.log('addons', cnt, addons[i]);
console.log(addons[i].name);
console.log(addons[i].id)
break;
}
cnt++
}
})
You're going to have to hard code something, the name, the id, something.
I really need a way to copy some text to the OS clipboard in Firefox.
Know it is easy in IE and not possible in Chrome and Opera unless flash is used. Because of different reasons I am unable to use the flash solution!
Had it working in the past but now the netscape.security.PrivilegeManager.enablePrivilege is protected as far as I can figure out (since ver. 17).
It looks as if it is still possible according to this article:
https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Believe it is still necessary to enable the possibility in the user.js file like this
user_pref("capability.policy.policynames", "allowclipboard");
user_pref("capability.policy.allowclipboard.sites", "http://");
user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
But how shall I do it? Have made some test without great success and think there is no guide on the web that explain how it shall be done in a generic way. E.g. a simple guide about how to enable javascript access to the clipboard. Hopefully also a guide that can be used by the novice user. Like to do it and post it here but need a working solution first.
According to the web there are 2 solutions for copy to clipboard;
document.execCommand("copy", false, null)
and
var gClipboardHelper = Components.classes["#mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
gClipboardHelper.copyString("Put me on the clipboard, please.");
Both generate a failure with my first try.
The solution below need the user to press CTRL+C and I need a solution where the text shall copy based on the press of a button (many on a single page).
https://stackoverflow.com/questions/4344325/copy-to-clipboard-on-firefox-and-google-chrome/11346026#11346026
My old solution was like this:
var clip = Components.classes['#mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if(clip)
{
var trans = Components.classes['#mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if(trans)
{
var str = new Object();
var len = new Object();
var str = Components.classes["#mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
if(str)
{
var clipid=Components.interfaces.nsIClipboard;
if(clipid)
{
str.data = cliptext;
trans.addDataFlavor('text/unicode');
trans.setTransferData("text/unicode", str, cliptext.length*2);
clip.setData(trans, null, clipid.kGlobalClipboard); // No return value
return 0;
}
}
}
}
Components.classes is undefined in unprivileged code (not add-on etc) so I do not believe any solution with this will work any more. One option is to make an add-on that will execute in privileged code area and send the text that shall be copied to this add-on for it to handle the copy to the OS clipboard (nice new possible project).
This only leave document.execCommand("copy", false, null) in the field as a stand alone solution.
Tried this code and it does not copy anything to the OS clipboard - but do not generate any errors btw.
var pre = document.getElementById('pcryptcopytext');
if(!pre)
{
pre = document.createElement("pre");
pre.setAttribute('id', 'pcryptcopytext');
pre.setAttribute('style', 'opacity: 0; position: absolute; top: -10000px; right: 0;');
document.body.appendChild(pre);
}
pre.innerHTML = cliptext;
pre.contentEditable = true;
//pre.unselectable = "off";
//pre.focus();
if (document.createRange)
{
var rng = document.createRange();
rng.selectNodeContents(pre);
document.execCommand("copy", false, null);
document.body.removeChild(pre);
}
So, anybody got a working solution?
Looks like this is not supported any more, and there is no replacement :(
https://support.mozilla.org/en-US/questions/977068#answer-500083
Maybe making some noise in a Firefox bug will help us get a (safe) solution.
Solved by creating a Firefox Add-on that exposes the clipboard object: https://github.com/myplaceonline/myplaceonline_ffclipboard
Example:
if (window.ffclipboard) {
window.ffclipboard.setText("clipboard text");
}
You can use firefox navigator object
navigator.clipboard.writeText("text you want to copy").then(() => {
// on success
}, (e) => {
// on error
});
document.execCommand("copy");
Is it possible, using javascript, to control an overlay firefox extension? I've extracted the contents of the extension and have identified what functions/methods I need to run, but they are not accessible within the scope of the console.
Thanks in advance for any ideas.
Yes it possible to interact with other add-ons, given the right circumstances.
My test case here will be com.googlecode.sqlitemanager.openInOwnWindow(), which is part of the SqliteManager addon.
In newer builds (I'm using Nightly), there is the Browser Toolbox. With it is is as simple as opening a toolbox and executing com.googlecode.sqlitemanager.openInOwnWindow() in the Console.
You may instead use the Browser Console (or any chrome enabled WebDev Console for that matter, e.g. the Console of "about:newtab"). But you need some boilerplate code to first find the browser window. So here is the code you can execute there: var bwin = Services.wm.getMostRecentWindow("navigator:browser"); bwin.com.googlecode.sqlitemanager.openInOwnWindow()
Again, enable chrome debugging. Then open a Scratchpad and switch to Chrome in the Environment menu. Now executing com.googlecode.sqlitemanager.openInOwnWindow() in our Scratchpad will work.
You may of course write your own overlay add-on.
As a last resort, patch the add-on itself.
Bootstrapped/SDK add-ons: you can load XPIProvider.jsm (which changed location recently) and get to the bootstrapped scope (run environment of bootstrap.js) via XPIProvider.bootstrapScopes[addonID], and take it from there (use whatever is in the bootstrap scope, e.g. the SDK loader).
Now about the right circumstances: If and how you can interact with a certain add-on depends on the add-on. Add-ons may have global symbols in their overlay and hence browser window, such as in the example I used. Or may use (to some extend) JS code modules. Or have their own custom loader stuff (e.g. AdBlock Plus has their own require()-like stuff and SDK add-ons have their own loader, which isn't exactly easy to infiltate)...
Since your question is rather unspecific, I'll leave it at this.
Edit by question asker: This is correct, however I figured I'd add an example of the code I ended up using in the end, which was in fact taken directly from mozilla's developer network website:
In my chrome js:
var myExtension = {
myListener: function(evt) {
IprPreferences.setFreshIpStatus(true); // replace with whatever you want to 'fire' in the extension
}
}
document.addEventListener("MyExtensionEvent", function(e) { myExtension.myListener(e); }, false, true);
// The last value is a Mozilla-specific value to indicate untrusted content is allowed to trigger the event.
In the web content:
var element = document.createElement("MyExtensionDataElement");
element.setAttribute("attribute1", "foobar");
element.setAttribute("attribute2", "hello world");
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("MyExtensionEvent", true, false);
element.dispatchEvent(evt);
Update for Firefox 47 and up
Things changed drastically in Firefox 47. This is the new way to access it.
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var addonid = 'Profilist#jetpack';
var scope = XPIScope.XPIProvider.activeAddons.get(addonid).bootstrapScope
Old way for < Firefox 47
Update for methods of today
Typically you will do so like this:
If i wanted to get into AdBlocks scope, I check AdBlock id, it is {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d} so I would go:
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var adblockScope = XPIScope.XPIProvider.bootstrapScopes['{d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}'];
You can now tap into anything there.
Another example, I have an addon installed with id NativeShot#jetpack
I would tap into it like this:
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var nativeshotScope = XPIScope.XPIProvider.bootstrapScopes['NativeShot#jetpack'];
if you do console.log(nativeshotScope) you will see all that is inside.
var locator = new ActiveXObject("WbemScripting.SWbemLocator");
var service = locator.ConnectServer(".");
var properties = service.ExecQuery("SELECT * FROM Win32_NetworkAdapterConfiguration");
var e = new Enumerator(properties);
var MACaddress = '';
alert("Its Inside");
for (; !e.atEnd(); e.moveNext()) {
var p = e.item();
if (p.MACAddress) {
MACaddress = MACaddress + p.MACAddress + ',';
}
}
MACaddress = MACaddress.substring(0, MACaddress.length - 1);
MACaddress = replaceAll(MACaddress, ':', '-');
location.href = location.href + '?CAT=MAC&MACAddr=' + MACaddress;
This function is working fine in IE but its breaking in mozilla firefox at the first line itself. I changed locator.ConnectServer(".") to locator.ConnectServer("MACHINE") but still its not working in Mozilla Firefox.
Simple answer: you can't.
Modern browsers sandboxes (or try to) everything that goes on in the browser for security reason. Sand-boxing prevents any direct access to a system incl. files system, hardware etc. (it doesn't mean the browser does not communicate with the hardware but as users we have not direct access to it).
IE is the only browser which supports ActiveX (which is Microsoft's own technology) but it shouldn't be relied upon for the same reason, (mainly..) security.
If you want to use the MAC-address for some sort of unique identifier/security you can instead look into the new Web Cryptography API, however, at the time of this writing it is still in draft mode and not widely supported (but will be, or intents to be, cross-browser sometime in the future) so perhaps not so very useful advice at the moment.
You can in any case use server side to generate a unique identifier based on various factors and store it locally in the browser using either cookies or localStorage and so forth.
I'm currently working on an app that aggressively uses webviews on both iOS and Android to render content, with native chrome surrounding it. I want to be able to control this chrome via javascript methods.
Android Webview has addJavascriptInterface which allows this to happen, but iOS does not have this facility. I've already checked out the SO answer at iOS JavaScript bridge, and this has usefuleinformation, but It's iOS-only; optimally the same underlying web code could power the callbacks on both Andorid and iOS devices.
I'm wondering if something like PhoneGap or Appcelerator provides a way to do this simply; however I don't need their core product (providing a native experience via underlying html/css/js) and I dont even know if what I need is included in their package.
Thanks for any info!
I would say that the best way would be to do it yourself, combining those two examples:
function nativeDoStuff() {
if (androidbridge != null {
androidbridge.doStuff();
}
else {
//construct url
window.location = "myiphonescheme://dostuff";
}
come to think of it, if you're feeling ambitious you could code up a quick javascript object to do it for you:
function NativeAppBridge () {
function runMethod(methodName, params) {
if (androidbridge != null {
// If the android bridge and the method you're trying to call exists,
// we'll just call the method directly:
if (androidbridge[methodName] != null) {
androidbridge[methodName].apply(this, params);
}
}
else {
// building the url is more complicated; best I can think
// of is something like this:
var url = "myiphonescheme://" + methodName;
if (params.length > 0) {
url += "?"
var i = 0;
for (param in params) {
url += "param" + i + "=" + param;
++i;
if (i < params.length) {
url += "&";
}
}
}
}
}
}
Using it would then be as simple as:
var bridge = new NativeAppBridge();
function onClick() {
bridge.runMethod("doStuff", null);
}
Be aware that I coded this off the top of my head and don't have time to test, at the moment - but I think it should work well enough, provided I didn't make any major mistakes
You can try the XWebView project if you plan to use WKWebView
You can use phonegap plugins to do it. They provide an excelent way to communicate between their webview and your native layer.
Here you can see how to create one!
And my personal opinion on the subject: I've been using phonegap for a while and if you are on webviews, I strongly suggest you to rethink the way you're doing stuff and move to a mobile web platform. You probably can save a lot of time.
The way I see it, the great disadvantage on using this is you are creating a webpage instead of a mobile app. You cant use native components and your app gets less responsive. As you are already on webviews, I believe you can only find benefits on these platforms.