Home Source code How I created a Chrome extension to convert Reg US spelling • The Register

How I created a Chrome extension to convert Reg US spelling • The Register


hands on The register began life in London in 1994 and today has journalists and other staff all over the world, including San Francisco, Sydney, Singapore, Berlin and beyond.

Previously, our vultures wrote in their local style: Americans used American spelling, Brits relied on British spelling, Australians were pretty much British style too, and everyone else did what they thought natural. If an article was, for example, written by the US team and published on the morning of the UK, the spelling would often be changed to British.

As we added more writers and editors around the world and reached more people around the world – now around 40 million unique readers per year – in all kinds of time zones, it became necessary for logistical and professional reasons to agree on a single consistent style for the entire site. After The register changed from a .co.uk to a .com during the pandemic, we chose the American spelling.

Why? Because it honestly reflects the true global nature of our readership. UK spelling may cause us to appear only in the UK. Yes, we were born in Britain, but today we welcome as many corporate techs as possible on the planet. We want our flavor of irreverent, informed tech journalism to spread everywhere, so we can do our part to challenge vendors, explain what’s going on, and bite the hand that feeds computing.

American spelling isn’t everyone’s cup of tea, though, or at least that’s the impression we’ve been getting from reading brick-centric notes thrown through our digital windows lately.

As an olive branch of that passionate segment of our readership with a preference for King’s English, this vulture decided to create a Chrome browser extension to change words in published articles from American spelling to English. British spelling.

It’s called Spellerizer, because I was going to be subtly stupid in hopes of setting myself apart from the sprawling, unrepentant stupidity that is the new normal of the internet. Also, the stupid name is a reminder that the extension doesn’t work very well. But hey, it’s free.

Translation, even between American and British spellings, is an art that requires consideration of context. Spellerizer isn’t that clever; it relies on a brute-force search-and-replace algorithm that pays no attention to the words around it. So if it sees “check”, it will change the US spelling to “check”, even though the proper UK spelling in this case is also “check”.

Really, I should have relied on a machine learning model to make more informed spelling changes. But it wouldn’t have been a weekend coding project. Feel free to submit improvements via GitHub.

My hope in creating Spellerizer is to demonstrate that it is reasonably easy to write a browser extension and to encourage those with modest knowledge of JavaScript to give it a try.

Of course, there are similar options, such as shell, Perl, or Python scripts to fetch, translate, and spit out pages. But the browser is a particularly important piece of software and worth customizing if you like writing code.

Spellerizer can be downloaded and installed from the Chrome Online Store or his GitHub repository. The former is a better option if you want it to persist and get updates – some people report that Chrome removes manually loaded (unzipped) extensions on browser restart for security reasons. However, this is not my experience.

Since I’ve never had an extension in the Chrome Web Store before, you can expect to see a warning – “This extension is not approved by Enhanced Safe Browsing”. – on the chrome://extensions/ post-installation page. Google Explain“For new developers, it usually takes a few months to gain trust.”

Spellerizer is not officially endorsed or supported by The register and its publisher Situation Publishing which makes no warranty as to its suitability or function. As the Chrome Web Store listing says, you probably don’t need it. But if you want it, if you really really want itmy editors are fine with the existence of the extension for now.

from google Chrome extension API documentation is a good place to get acquainted with the quirks of building a browser extension. Once you have a basic idea of ​​how the main components (the manifest, service worker, content scripts, and other extension-related web pages) relate to each other, it’s worth worth installing an extension like Chrome extension source reader (CRX) to view the extension’s source code from the Chrome Web Store before downloading.

It’s possible to view the source code of an extension that’s already installed, but it takes a bit more effort because you need to know the path to Chrome’s extension folder (chrome://version/ -> [Profile Path field]/extensions) and then recognize the correct 32-character identifier used for the extension’s directory name among others that may be present.

Spellerizer may be more complicated than necessary because I chose to implement internationalization – a way to replace visible text strings in the extension with translated text according to the language set by the browser. The localize.js The script gathers text values ​​from HTML page elements marked with the “data-i18n” attribute so what replaces translations taken from the messages.json case.

The extension, written using Manifesto v3works by loading the service worker, background.jsand showing onboarding-page.html during installation. Foreplay aside, it adds a listener function to the Spellerizer icon, which if you followed the instructions and pinned to browser barwill be visible without digging into the extensions context menu.

The listen function attached to the Spellerizer’s vulture icon triggers the content-script.js file, which does the heavy lifting. If you click on it while viewing a Register page, it retrieves the orthographic data file, spelling_data.json (made available by developer Heiswayi Nrird under MIT license), and runs through all DOM nodes – a tree structure used to organize the elements of a web page.

The approach I took wasn’t particularly sophisticated – I’ve since learned that there’s a more concise way to iterate over DOM nodes using a Surveyor object – but loops within loops do the job. The scanWords function (line 20, content-script.js) separates the display text associated with DOM nodes into individual words and compares each to each of approximately 1700 US/UK word pairs. If it finds a match, it replaces the US spelling with the UK spelling, preserving the case of the original.

If the script finds words to replace, it will update the extension icon badge with a number representing the number of words swapped. The badge disappears when you click on another browser tab. And if you recharge a Register page, all the changes made disappear because they are client-side only.

There is also an options page I added to test persisted data through the local storage API. Accessible via a ctrl-click on the Spellerizer icon, the options menu features a single checkbox labeled “World Peace”.

As you can imagine, this has no effect. Enjoy. ®