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 url : cors-anywhere.herokuapp.com/https://dev.to/..

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 :

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

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

Go back to your dev.to page

Tadaaaam !

Your article is there !

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

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.

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 :)