DEV Community: Robert James Gabriel

Translate your browser extension in seconds

Robert James Gabriel — Wed, 26 Jun 2019 22:19:06 +0000

Hey 👋,

If your reading this you probably came for the same reason, I did in the past. How do I easily translate my browser extension to other languages?

Well as part of my startup Helperbird I needed to translate the browser extension to other languages to increase the reach. So I looked at different solutions and found one promising GitHub repo but it wasn't perfect.

With Chrome or Browser extensions, you have a folder layout like this.

_locales/{{languageCode}}/messages.json

Where the original one by Thomas Brüggemann while great doesn't fit in into the browser extension development flow.

So I forked the extension and rewrote it, to make it for browser development (Also dont worry, I will be adding feature to the original master) . So if you're a browser extension developer. You can do the following now.

Installation

npm install -g translate-extension-json

Usage

You need a Google Translate API Key.

translate-extension {{apiKey}} {{location of json file}} {{Translate from}  {{Tanslate too,Tanslate too,Tanslate too,}}

e.g.

translate-extension-json iuOHAEbo9H788d34h93h4dioue2I locales en es,fr

This would translate all strings in _locales/en/messages.json (relative to current folder in the shell) from English to Spanish and French, based on the Google Translate API language codes.

The target languages list is optional. When not present, it will be translated to all languages supported by Google Translate.

See it in action.

If you liked this project and guide, you can follow me here.

The node module code is here and the Github source is here

A puppeteer script to discover and download all Netflix categories in a JSON file.

Robert James Gabriel — Thu, 10 Jan 2019 05:14:19 +0000

Netflix has hundreds of hidden categories. How do go about discovering them and finding new ones?

Well, I wrote a puppeteer script. That runs headless chrome, logs into Netflix and goes through each URL, extracts the category title and saves it in a JSON file for you to use.

/**
 * @format
 * @name Netflix
 * @desc Logs into Netflix. Provide your username and password in the config file when running the script, i.e:
 */

const puppeteer = require('puppeteer');
const fs = require('fs');
const config = require('./config.json');

(async () => {
    let results = [];
    const SHOW_LOADING = config.showLoading;
    const browser = await puppeteer.launch({
        headless: config.headless,
    });
    const page = await browser.newPage();

    // Open login page and login
    await page.goto('https://www.netflix.com/ie/login');
    await page.type('#id_userLoginId', config.username);
    await page.type('#id_password', config.password);
    await page.keyboard.press('Enter');
    await page.waitForNavigation();

    // Click the user account
    await page.click('.profile-icon:nth-child(1)');

    // Start going though the urls
    let categoryID = 1; // Count
    let error = 0; // If four errors in a row, end the loop.
    const ERROR_LIMIT = config.errorLimit;

    do {
        await page.goto(`https://www.netflix.com/browse/genre/${categoryID}`);
        let element = await page.$('.genreTitle');

        // If the element exisits
        if (element !== null) {
            let categorieTitle = await (await element.getProperty('textContent')).jsonValue();
            if(SHOW_LOADING) console.log(`.${categoryID} ${categorieTitle}`);

            // Create json object
            let jsonObject = {
                title: categorieTitle,
                id: categoryID,
            };
            results.push(jsonObject);
        }

        // If the element isnt there.
        if (element === null) {
            error++;
        }

        categoryID++;
    } while (error <= ERROR_LIMIT);

    fs.writeFile('results.json', JSON.stringify(results), function(err) {
        if (err) throw err;
        console.log('complete');
        console.log('Categories:' + categoryID);
        browser.close();
    });
})();

Check out the repo here

You can also follow me on Github and Twitter

Localization support in your Vue.js based Chrome extension

Robert James Gabriel — Thu, 03 Jan 2019 12:03:49 +0000

Localization is important when you’re looking to grow your app or website in other markets. Recently I added localization support to my startups’ product Helperbird. If you’re building a cross-platform Chrome app it is super straightforward.

Getting started

To get started, your going to make sure you have a folder called “_locales” in your projects directory. In this folder, you will have a folder en for English. To add more languages, you will create more folders with the languages shorthand, ES for Spanish and so on. In each of the language folders you will need to create a JSON file called “messages.json”

The contents of the messages.json file.

As you can see in the above screenshot, we have JSON objects with different message values. These are the English strings we will telling the Browser to inject into the app on render. So if the users browser and computer is set to English it will use these strings. The keys will have to unique.

Setting up your App

In Helperbird I am using Vue.js. We will be using this fantastic i18n Vue.js plugin called “vue-plugin-webextension-i18n” by ~straybugs. This will allow us to have full support across all browsers, as it uses the Chrome native i18n functions and the webExtension functions which are used by Firefox, IE and Safari.

Install it

npm install vue-plugin-webextension-i18n — save_

Include it in your app

import i18n from ‘vue-plugin-webextension-i18n’;  
Vue.use(i18n);_

Use in app

In your messages.json file. You have all the strings you want to inject into app.

{
"appName": {
"message": "Mobile Dyslexic Tool - Helperbird for Chrome"
},
"appTitle": {
"message": "Helperbird"
},
"appDescription": {
"message": "OpenDyslexic font for Chrome. Google Docs Support. Text to speech. Background colors and more."
}
}

To access and inject “appTitle” into your app. For in the javascript functions or logic, will will use this.$i18n() from the plugin we installed, which will the add the cross platform support to the native function.


enableDyslexica: function () {
  this.showSnackbar = true;
  this.popupMessage = this.i18n('appTitle');
  this.save('enabled', this.enable);
  this.reload();
}

In your template section, you will have to do the following.

<h3 class="md-title" style="flex: 1">{{ $i18n('appTitle') }}</h3>

Now thats it, you just need to do this for all the strings in your app. Now just build your project and it will work without anything else.

Finishing up

Once an extension or app is internationalized, translating it is simple. You copy messages.json, translate it, and put the copy into a new directory under _locales. For example, to support Spanish, just put a translated copy of messages.json under _locales/es. The following figure shows the previous extension with a new Spanish translation.

Also important to note, you can use any of the supported locales. If you use an unsupported locale, the browser will ignore it.

I would love feedback on this. You can follow me on Github and Twitter.

Importance of `.indexOn` in Firebase

Robert James Gabriel — Tue, 01 Jan 2019 22:18:15 +0000

Firebase allows you to do ad-hoc queries on a collection of nodes in your database using any common child key. If you know in advance what your indexes will be, you can use the Firebase Real-time Database Rules to define the indexes for your data using the “.indexOn” rule to improve performance.

Why should I care?

As your web app or website grows in size, the performance of its query degrades. If you define your indexes on the keys you will be querying, this will help both in performance and in the amount of data used.

Firebase will index using those keys on their servers, improving your queries and amount of data sent. Otherwise without the index defined the sorting will be done on the client side.

Look at this snippet as an example. I will use it to explain how “.indexOn” works with the built in function orderByChild().

So with this data, I will be querying by the engineSize and/or the year key. Imagine is node is one thousand nodes in length and no index set. It will return all the data to the client.

The names of the cars are already an index so Firebase already optimizes for queries by car names. You can use “.indexOn” to tell Firebase to optimize queries for engineSize and year as well. This will be done on Firebases` servers before it is returned.

The importance of the indexon function is for better performance and querying. So next time you’re designing your Firebase real-time database, take time even if it’s a small hobble app, to define your indexes. As you will see better performance and less bottlenecks on the client side as your database grows.

If you would like to be alerted when I publish new blog posts or coding project. You can follow me on Github and Twitter.

Footnotes

How was your experience with the technical phone interview

Robert James Gabriel — Thu, 25 Oct 2018 15:27:31 +0000

A website that allows you to search, browse and download all past iOS wallpapers

Robert James Gabriel — Sat, 20 Oct 2018 01:22:08 +0000

Anyone who follows me on Twitter or Github knows I work on my own startup Idea and a few pet projects. One of these includes this. A website that allows you to search, browse and download all past iOS wallpapers. All built with vue.js but built as a PWA as well.

You can try out the app here and the source code is here.

Any feedback or questions I would love to answer. Also my whole website is 100% in light house.

A node module that returns an array of Bad Words and Top Swear Words Banned by Google.

Robert James Gabriel — Thu, 27 Sep 2018 04:22:35 +0000

Google has inadvertently created an API that third-party developers can use to check whether a word entered by a user is likely to be offensive or not. This is now closed and was part of the Googles What Do You Love? site. So I scrapped this before it was closed and its now in a node module for people to use in projects. Hope you enjoy!!

Installation

$ npm install --save google-profanity-words

Usage

const googleProfanityWords = require('google-profanity-words');

googleProfanityWords.list(); //  [ '5h1t','5hit','a55','anal','anus',etc.....]  Returns a array of Profanity. 350

You can follow me on here and on the following for more code and projects.

Twitter or
Github.

I made a dyslexic app with over 50,000 users

Robert James Gabriel — Fri, 10 Aug 2018 02:19:07 +0000

I made a dyslexic app with over 50,000 users

My name is Robert James Gabriel. You can follow me on Twitter or Github. A 25-year-old software developer and I thought I would write here in kinda of a shameless plug but also a post for people to discover these apps and to spread the word that tools like these existed for people with Dyslexia. I have dyslexia myself and work on these semi-full time.

So what is OpenDyslexic Font?

"OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia. The typeface was created by Abelardo Gonzalez, who released it through an open-source license.[3][4] The design is based on that of DejaVu Sans, also an open-source font."

Helperbird

So I made helper bird https://chrome.google.com/webstore/detail/opendyslexic-font-helperb/ahmapmilbkfamljbpgphfndeemhnajme as a simple chrome extension that switches the font on any page to the OpenDyslexic Font. It currently has over 3,000 users.

OpenDyslexic

After a few months, I revamped the OpenDyslexic Font Chrome extension, to have the same much-requested features. https://chrome.google.com/webstore/detail/opendyslexic-font-for-chr/cdnapgfjopgaggbmfgbiinmmbdcglnam?hl=en. Currently has 45,000 users and peaks to 100,000 daily users during the school months.

So If you have time, try them out give feedback and let people know that these exist and could help a fellow dyslexic person out. Leaving reviews and feedback will help out a lot.

If you have any questions or feature request I would love to hear and answer them. If you want help support the costs of running these apps you can support me here https://www.paypal.me/robertjgabriel
. My personal site is here too if needed as proof https://robertgabriel.ninja/

:) All love and hope you enjoy.

I made and Can I use __ audit tool

Robert James Gabriel — Mon, 23 Jul 2018 16:43:47 +0000

Anyone who follows me on Twitter or Github knows I work on my own startup Idea and a few pet projects. One of these includes this. A chrome extension that what runs audits on the current site your viewing against can I use. It was built with Vue, Bem and Mocha.

How it works

Open the Chrome extension on any page
Check the URL and click enter
See the HTML, JS and CSS feature that is not supported on the site and affect SEO rankings.

About

Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers? So you can run this on any page and get a response of all the features that are used on the page and not supported.

What does this tool do?

This tool displays and non-exhaustive list of HTML, Javascript and CSS features a page is using which are not supported by the Google Search bot or popular browsers.

You can see a video demo here

You can download it here free for a week on Google Chrome. (1.50 after that)

Any feedback or questions I would love to answer. The money on this covers the costs :)

I made an app that gives you access too 20,000 plus hidden Netflix categories

Robert James Gabriel — Sun, 22 Jul 2018 14:58:44 +0000

Anyone who follows me on Twitter or Github knows I work on my own startup Idea and a few pet projects. One of these includes this. A chrome extension that searchs and finds Netflix's Hidden Categories and grows with them. It was built with Vue, Bem and Mocha.

Netflix has thousands of hidden categories. This extension I made helps you unlock many of those secret categories.

Features:

Search verified hidden categories
Small size ~ 0.02 MB
Favourite categories
Syncing across browsers

Privacy:

No permissions required to install
No data is sent

You can see a video demo here

You can download it here free for a week on Google Chrome. (1.99 after that)

Any feedback or questions I would love to answer. Like how do I get the new catorgories? The money on this covers the costs :)

How do you promote your apps or projects?

Robert James Gabriel — Thu, 19 Jul 2018 17:08:25 +0000

My Google Chrome Developer Dashboard Wishlist

Robert James Gabriel — Wed, 30 May 2018 04:32:16 +0000

My Google Chrome Developer Dashboard Wishlist

With the new Google Chrome developer dashboard being slowly released with
missing features. I thought I would write my top wishes.

Emails when someone buys one of my apps.

This seems like a huge oversight. I would love even a setting. That when someone
buys one of my apps (Paid) I get an email or push notification. Instead of the
current setup where I have to check through Google Payments.

Real time analytics

Again this is a huge oversight. With Google Analytics being the number one in
web tracking you would think it would be here too. It takes 24 hours for states
and amount of users to update and even then it’s awful. Would be nice to have it
per hour updates or every 3 hours. Even things like a break down of the number
of users per country or device.

HD support for screenshots

Look how blurred this is.

Just have a look here, they do a horrible job of compressing the images. If
anything they should allow or convert the image to webp. Isn’t the idea here to
showcase your apps? Apple and Mozilla do a great way to showcase things like
this.

Security checks

Mozilla check though your code for outdated scripts and if your code is
venerable to xss attacks or more. Wish Chrome would do this here too

Bi weekly payouts

Being able to get paid bi weekly instead of monthly. Simple as.

Trial mode for apps

This would be game-changing!!!! Being able to allow people to download a paid
Chrome extension and give them a 7 day try before asking them to pay. This would
hugely increase conversations. Seems like a no brainer.

Better review process

This links to the above Security checks feature. I would personally like the
review process to give more feedback and a correct check on the quality of the
app. With some chrome extensions, they can dramatically affect the page speed of
a website. Seems like this might happen and I hope it does. Given that Google is
focusing on PWAs it would be amazing to see them use this as a standard for
chrome extensions.

Miscellaneous

The ability to remove old or discontinued items from the item overview page.
Email and in-product notifications about important events, such as when a user leaves a review for your extension in the Chrome Web Store.
Revert to an older version.
Redesigned website/store.
Less spammy items and awful clones.
Trial mode in apps. So you can try out an app for a week before paying for it.
Referral analytics.
PWA support
Version Reviews

New Chrome Developer Dashboard

What’s your wishlist? Let me know on
Twitter or
**Github.

If you feel like supporting me, as I just started working on open source full
time. You can see more about me here. My
donate page here.