Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smaranjitghose/profile_chrome_extension
A simple chrome extension for keeping all your profiles under the same roof
https://github.com/smaranjitghose/profile_chrome_extension
Last synced: 17 days ago
JSON representation
A simple chrome extension for keeping all your profiles under the same roof
- Host: GitHub
- URL: https://github.com/smaranjitghose/profile_chrome_extension
- Owner: smaranjitghose
- License: mit
- Created: 2020-04-13T23:23:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-17T12:21:42.000Z (almost 4 years ago)
- Last Synced: 2024-08-01T02:31:49.235Z (3 months ago)
- Language: HTML
- Homepage:
- Size: 611 KB
- Stars: 6
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
Profile Chrome Extension
Are you someone who is active on multiple social media platforms📱?
Well if the answer is Yes💃,your Bookmarks Bar must be cluttered with them?
Want to clean it up a bit?🧹 But what about those one-click solutions you had? Can you preserve them?
Definitely you can with your custom chrome extension 💻.
Wondering who is gonna build that classy thing for you?🤔🤔 Look no further. You are covered!
Lets see what we have here 👀:
Want it for yourself? Here you go
- Clone this repository ⏬
- Move inside 👉 the repo
- Open the Terminal 👩💻
- and type ```cd profile_chrome_extension```
- Lets start with the assets you need to modify:
- You need an icon (mostly your name's initial's in some fancy font)
- Resize it to 128x128 and 19x19 px respectively(you can experiment with other sizes too, these are what worked for me). You can use [ResizeImage](https://resizeimage.net/) for this
- Save them as ```your_name_profile_icon_small.png``` and ```your_name_profile_icon_big.png``` inside the ```assets``` folder(YOu can also use other extensions like .jpg)
- Now take your favorite profile picture and [resize]((https://resizeimage.net/)) it to 50X50 px (Again, this worked for me. You are welcome to experiment with other sizes)
- Save it as ```your_name_picture.png``` inside the ```assets``` folder
- Cool!, you lets have a look at the most crucial file of our Chrome Extension: ```manifest_json```
- Open it in your favourite IDE. (I always prefer [VS Code](https://code.visualstudio.com/) )
- By default, it looks like this:
```js
{
"manifest_version": 2,
"name": "My Profile Hub",
"description": "All my profiles under the same roof",
"version": "0.0.2",
"icons": { "128": "assets/smaranjit_ghose_profile_icon_big.png" },
"browser_action": {
"default_icon": "smaranjit_ghose_profile_icon_small.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
```
- Don't worry! We are in this together. Let's do this one step at a time.
- First Update the name you want to give to your chrome extension
```js
"name": "Your_Profile_Extension_Name",
```
- Now,give a small description about it
```js
"description": "All my profiles under the same roof",
```
- (Optional)Decide the version you want to start with. I prefer starting with 0.0.1
```js
"version": "version_number",
```
- Now, Lets give it your icon
```js
"icons": { "128": "assets/your_name_profile_icon_big.png" },
```
- And finally the default icon(the 19x19 one)
```js
"default_icon": "assets/your_name_profile_icon_small.png",
```
- Save ⚓ the changes to the File
- That was easy right?. Now, lets see the basic web dev mantra behind our extension
- Open the ```popup.html``` in your favourite IDE (Again,I prefer [VS Code](https://code.visualstudio.com/) )
- Change the title:
```html
Your_Profile_Extension_Name
```
- (Optional)If you have some specific font in mind. You can change it here: [Here we are using [Google Fonts](https://fonts.google.com/)]
```html
```
- Now scroll down to the `````` tag
- Upate your profile picture and name of your chrome extension (A small Tip:Don't make it too long)
```html
Your_Chrome_Extension_Name
```
- Now update with a one-line description or perhaps a note for yourself
```html
All my profiles under the same roof
```
- Finally, update your social media profile links:(Delete the given links if you don't use any of the social media platforms mentioned)
```html
```
```html
```
```html
```
```html
```
```html
```
- Save ⚓ the changes to the File
- Damn! That was a lot of changes. Now let's use our chrome extension.
- Open Google Chrome
- In the Search Bar, type ```chrome://extensions```
- Enable Developer Mode option (If not already done)
- Click on ```Load Unpacked```
- Navigate to the ```profile_chrome_extension``` directory and select it
- Baam!💣 you just made your own Chrome Extension💻 for handling your social media profiles
Want to take this a step further? And share it with the world!
- Compress all the content of the ```profile_chrome_extension``` into a .zip file 📦
- Go to [Chrome Webstore](https://developer.chrome.com/webstore/publish). Please carefully read the instructons
- Make sure you have a snapshot📸 of your Chrome extension working in 1280x800 px saved
- Now click on the [Chrome Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard)
- Log in with your Google Account.
- Accept the terms
- Pay the one-time registration fees💰 . (The last time I checked it was around 5$)
- Click on Add New
- Locate your compressed chrome extension 📦in your system and select it
- Select your snapshot 📷
- Click Publish
Boom!💥 You are a Google Chrome Extension Developer now and just got your first extension published (FYI:Give it some hours to be done)
# Always grateful 🙏 to Professor [Daniel Shiffman](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw) for his tutorials and walkthroughs
License 📜
[MIT License](https://github.com/smaranjitghose/profile_chrome_extension/blob/master/LICENSE)
# **Crafted with ❤ by Smaranjit Ghose**
[](https://github.com/smaranjitghose) [](https://github.com/smaranjitghose)
***