[CODE] Stylish Addon

Day 3,807, 13:03 • Published in Iran Iran • by Akane Kawahara
Today 23rd of April 2018
Day 3805
In the name of the most beautiful eyes.
Hello again and I want to appreciate you following this newsletter.
First of all I want you to checkout my Github Profile and the code Repository for the project in my previous Article.
As I promised you can also download the source code and use it in you debugging browser to see how it looks like from here.
If you also checkout the code commit, you can see which parts are added for the influence calculator.
In this part you should be able to:
❤️ Write a code which circulates your avatar.
I thought writing long long articles to achieve a great success would fail so in this article I would like you to forget the past articles and start with this article as a beginning.
Extension Skeleton
I would like to update my code this time and just learn this part where would will use simple CSS code in content_script to circulate your sidebar avatar.
So our project hierarchy would look like this:
nevergarden/
styles/
Create a directory called erepcircle
Create a file named manifest.json
Create a directory called style
Enter styles directory
Create circle.css
This is how a simple project skeleton look like in firefox extension.
{
“manifest_version”: 2,
“name”: “nevergarden”,
“version”: “0.2”,
“content_script”: [
{
“matches”: [“*://www.erepublik.com/*”],
“css”: [“styles/circle.css”]
}
]
}
Code explain
First values are self explanatory
manifest_version 2 is the version of extension api we are using.
name is name of our extension.
version is version of our extension.
New part is content_script part which gets an Array (better call it list) of objects.
List of objects looks like this:
[ {object1}, {object2}, … ]
In content_script objects must have “matches”
Matches indicates on which pages your code should run.
Matches on fire
When we are writing matching patterns there are some things we should be careful of.
An * (asterisk) stands for EVERYTHING.
For example:
Would match every page of erepublik.
But when you change it to:
It would match every page on erepublik which their language is English.
With Style
Now we enter the styles directory and edit circle.css.
We just need to add a rule to this “user_avatar” class. When we want to do it in css we use:
.user_avatar. Although the html hierarchy looks like:
#large_sidebar > .sidebar > .sidebar_container > .user_selection > .user_avatar
We can use space between them or we can even omit the previous selectors and use .user_avatar only or maybe .sidebar .user_avatar doing this does not let other user_avatar classes change in the page. In this case we use
#large_sidebar .user_avatar just like the way Erepublik developers did.

#large_sidebar .user_avatar {
border-radius: 100%;
}
Tadaaa! Your avatar now have a circle look and it’s stylish.
There is one problem left now.
When you hover the picture in other pages rather than your page,
We can edit our code so the same thing happens for the element of that “View Profile” box.
If you inspect the code you see its class is: .user_avatar span
So now we have to change 1st line of our circle.css from:
#large_sidebar .user_avatar { into #large_sidebar .user_avatar , .user_avatar span {
That simple comma (,) will apply the same Rule into that span element too.
And yes I have 6k energy poll… Pro hackerman!
Thank you for reading this article hope to write another article soon but there are some Real Life stuffs I have to settle first and also EWorld has gone mad and I have to check the world's latest news.
To use the code again you can clone or download repository and again the same stuff:
❤️ Type in about:debugging
❤️ Locate the manifest.json
❤️ Select and enjoy it.
Although you have to locate it every time you restart firefox but when I finally export it as an addon or you can with your own code it will appear as permanent addon.
Also you can check this articles code commit here and see how I changed the code of mine here:
Enjoy and ask any question in comments.