Chrome extension to publish your Hashnode article to Dev.to

The idea

I always wanted to learn how to create a chrome extension.

I had the following idea : "It would be awesome to have an extension that republish my article from Hashnode to Dev.to".

I knew that Dev.to exposes an API.

But i didn't know how to write a chrome extension.

And i saw this super article by Piyush Sinha and i decided to try to realize my idea for the #ChristmasHackathon.

How it's gonna work

The extension will work when you are writing an article ( a draft, or editing an article).

When you'll click on the icon of the extension on your browser, it's gonna look for the title of your article, the content (the whole article) and post it to Dev.to.

Let's do this !

Folder structure

Create a folder with the name of your extension : i called mine Republish.

mkdir Republish
cd Republish
touch manifest.json

Here is the code for the manifest.json.
To make the http call, we are going to use Ajax, so we need Jquery. Just download the minified version and put the file jquery.min.js in your folder.

// manifest.json
{
    "manifest_version": 2,
    "name": "Hashnode republish to DevTo",
    "description": "Plugin to republish articles from Hashnode to Dev.to",
    "version": "1.0",
    "content_scripts":[
        {
            "matches":[
            "https://hashnode.com/edit/*",
            "https://hashnode.com/draft/*"
            ],
            "js": ["jquery.min.js"]
        }
        ],
    "browser_action": {
        "default_icon": "icon.png"
        },
    "background": {
            "scripts": ["background.js"]
        },
    "permissions": [
        "activeTab"
        ]
}

Then we are going to create two js files :

touch background.js, content.js
//background.js

// the script will be executed only when you click on the extension
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null,{file: "content.js"});
 });
//content.js

// find the content in markdown in the page
const editorContent = $('textarea[name ="editor"]');

// save it in a variable 
const article = editorContent[0].value;

// find the title;
const title = $('textarea')[0].defaultValue;

// prepare the payload
const payload = {
    "article": {
        "title": title,
        "published": false,
        "body_markdown": article,
        "tags":["javascript"]
    }
};

$.ajax({
    url : 'https://cors-anywhere.herokuapp.com/https://dev.to/api/articles',
    type : 'POST',
    data: payload,
    headers: {
        "api-key": "YOUR_API_KEY",
    },
    success : function(code_html, statut){ 
        console.log(code_html, statut);
    },
    error : function(code_html, statut){ 
        console.log(code_html, statut);
    }
});

If you read the code below, two things are gonna strike you :

  • the API-KEY : you need an API KEY to POST or EDIT posts on Dev.to

To obtain one :

visit dev.to/settings/account

in the "DEV API Keys" section create a new key by adding a description and clicking on "Generate API Key"

The original url is https://dev.to/api/articles but when i tried it, i got the following error :

Request has been blocked by CORS policy

On their API, CORS (Cross-origin resource sharing) is not enabled for endpoints that require authentification... I thought i was stuck forever, but i discovered a way-around: online CORS proxies.

So i tried it and boom ! it worked !

Now let's try the extension

Go to chrome://extensions/ and enable developer mode.

Then click on Load unpacked to download your extension.

Everytime you make a change on your code, you need to reload it from there to see the changes.

Now the test ...

Open one of your previous articles :

your_extension.jpg

On an other tab, open your dev.to account and go to your articles :

Capture d'écran 2020-12-25 19:10:59.png

Now click on the extension , and you'll see on the console the response from the API call :

after_post.jpg

Go back to your dev.to page

Capture d'écran 2020-12-25 19:13:32.png

Tadaaaam !

Your article is there !

You can see that it's in a draft state, so you can still edit it before publishing !

Capture d'écran 2020-12-25 19:14:10.png

Canonical Url

You have two options to add a canonical url :

  • You can add it on the payload of your request with the key canonical_url.
  • Or when you edit your article on Dev.to, you can add the canonical url in the post options.

Capture d'écran 2020-12-25 20:14:04.png

Check this article from Catalin Pit where he explains in details what is the purpose of the canonical Url.

It's working !!

Now you have an extension ready to republish your articles from Hashnode to Dev.to in just one click.

It's gonna save you a lot of time !

Once again, thanks to Piyush Sinha for his article on the Chrome extension, it helped me so much to realise my extension!

Have fun everyone :)

Piyush Sinha's photo

Thanks for the mention❤️... & it's a great idea which will save us alot of time. Good job 👍

Savio Martin's photo

Great work Sonia Manoubi, You have done a great job!!

You code like a pro!!

Usman Sabuwala's photo

This seems so interesting. Thanks for this article Sonia

Afoma Orji's photo

Sincerely speaking, this is amazing to me.

Sonia Manoubi's photo

Thanks ! i am happy that it could help you in any way !

Afoma Orji's photo

It really did. Thank you. Sonia Manoubi