How to make a chrome extension for facebook
Chrome Extensions Tutorial — Let’s Build a Chrome Extension | by Afolayan Raphael Oluwaseun | Facebook Developer Circles Lagos
Ever wondered how awesome chrome extensions like Grammerly, InspireNuggets, Mozbar, Keywords Everywhere and others are built?
Maybe you are just a developer who is curious about how these awesome extensions are built and made to seamlessly integrate with the chrome browser.
Well, this article is a comprehensive guide that explains how to make extensions for chrome and it is expected that by the end of this article you should have an idea of how to make your first chrome extension.
Existing extensions on the chrome marketplace
To create an extension for chrome, the following is required:
- An Understanding of how chrome extensions work
- An idea of what you want to create
- A knowledge of the desired language
- A Manifest.json file that contains detailed information about your extension
- Icons for your extension
- Some Coffee :)
According to the Chrome extensions documentation:
Extensions are small software programs that customize the browsing experience.
They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.
An extension must fulfill a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.
The Chrome Extension we are going to be creating in this tutorial will be a simple extension that greets ‘Hello World!’ when its triggered.
Enough talk.
Lets down to making our very own chrome extension!
- Create the main folder for your Chrome extension
- Add the manifest.json file
- Adding an icon
- Add Your HTML
- Testing Your Extension
Creating a main Folder For your Chrome Extension
There is no special procedure here, Simply create a directory where all the files for your extension will be placed.
For the sake of simplicity, we’d be naming our extension’s folder: ‘hello-extension’
If you’re using git bash or a terminal, type mkdir hello-extension
Navigate to the folder you just created and create a manifest.json file.
With git, that is done with touch manifest.json
On windows, you can use the new file command.
In the manfest.json file add the following lines of code
The instructions above gives chrome the necessary information about our extension.
The next step is to proceed to add our icon
Download a sample icon here or create your own and make sure its in the same folder as your manifest.json.
Once that is done, include your icon in the manifest file so your code whould look like this:
After our icon has been specified in the manifest file of the chrome extension we are building, its time to add some activity to the extension.
In the workspace folder, proceed to create an HTML file and name it as ‘popup.
html’ or whatever name you wish to.
Add the following code to the HTML file:
Save and proceed to include the HTML file as the default action in your manifest.json file:
Voila! we have just created a simple extension for chrome!
Let’s Proceed to see our extension in action.
Open the Chrome Browser and in the address bar, type in ‘chrome://extensions/’ and hit enter
It takes you to the chrome extensions tab in your browser
Screenshot of the extensions dashboard
- As seen in the image above, enable Developer Mode by toggling the switch to the right.
- Click the Click the Load Unpacked button that appears when developer mode is on.
- You are presented with a dialog box that prompts you to select the folder where your extension is located, select the hello-extension folder you created earlier.
- Your browser Immediately updates with the icon you created showing up on the upper right corner where your other installed extensions appear.
- Click on the icon and you should see a very refreshing message waiting for you there :).
Follow the Official documentation to learn how to publish your extension to Github.
Chrome extension development is a very interesting area of web development that should fancy any developer. Learning how to make chrome extensions is something very cool. However, proceeding to make awesome extensions would also be beneficial as it could give a good boost to your Resume as a developer.
Hit the clap button to encourage me to write more technical guides and remember to hit the follow button to see when i publish new articles.
Give me a star on github via my profile
Till then, see you in my next medium post!
15 Extensions to Transform Your Facebook Experience
If you access Facebook from a computer rather than your mobile device, then it's easy to make the desktop Facebook experience better using extensions.
Browsers like Google Chrome and Mozilla Firefox offer many extensions that can change how you interact with Facebook, whether it's by adding features or removing unwanted elements.
Keep reading to learn about the best Facebook extensions that you can install today...
Available on: Chrome, User Script
Of all the Facebook extensions, Social Fixer is the most popular and most comprehensive solution. It offers an exhaustive list of features that help make Facebook a more enjoyable experience.
Some of the extension's top tools include ways to turn off sponsored posts or force your news feed to show the newest posts first. It also has a news feed filter and a friend manager that will let you know when someone unfriends you.
You can even use Social Fixer to roll back the 2020 Facebook redesign so that the site displays the old layout instead.
Download: Social Fixer (Free)
2. F.B. Purity
Available on: Firefox, Chrome, Edge, Safari, Opera
Like Social Fixer, F.B. Purity is an all-in-one tool that can overhaul many aspects of the native Facebook home page when viewed in a browser.
Some of the best features include hiding ads, hiding related posts, hiding upcoming events, and hiding recommended games. You can also revert to the old Facebook layout and turn off auto-playing videos.
Download: F.B. Purity (Free)
3. Facebook Demetricator
Available on: Firefox, Chrome, Safari, Edge, Opera
Research suggests that Facebook is making us sad, and a part of the reason is that we tend to quantify our self-worth with the number of likes or shares our posts get.
Facebook Demetricator is a Facebook add-on that hides these numbers from your Facebook home page. For example, instead of seeing a fixed number, such as "15 people like this," you'll just see a "People like this" message.
Download: Facebook Demetricator (Free)
4. Privacy Badger
Available on: Chrome, Firefox, Edge, Opera
It's no secret that Facebook stores a massive amount of data about its users (and, perhaps more worryingly, its non-users).
In fact, there are lots of ways Facebook invades your privacy, and many people are becoming increasingly uncomfortable with the level of intrusion.
If you want a way to stop Facebook from doing all that tracking, check out Privacy Badger. It's an official extension from the Electronic Frontier Foundation (EFF) that will prevent third-party advertisers from collecting information as you browse the web—Facebook included.
Download: Privacy Badger (Free)
5. Seen Blocker for Facebook
Available on: Firefox
We're all familiar with the concept—when you read a message that someone has sent you on Facebook, the sender will know you have opened and read it thanks to a notification icon in their own chat window.
To prevent that from happening, check out Seen Blocker. It will let you read Facebook messages without activating the "message read" notification for the other person.
Sadly, this Facebook extension is only available on Firefox.
Download: Seen Blocker for Facebook (Free)
6. Photo Zoom for Facebook
Available on: Chrome, Firefox, Safari
Whenever you scroll through a Facebook feed, you'll be acutely aware that all the photos are shrunk down on-screen. This is not unique to Facebook; all social networks deploy the approach, partly to help save data and partly because of the practicalities of using a computer screen.
However, if you want to see a photo in its full-size glory on Facebook, you need to physically click on it. If you enjoy studying a lot of friends' pictures, that quickly becomes tedious.
Photo Zoom for Facebook removes the need to click. Once you have installed the extension, merely hovering over a photo on your news feed will show its full size.
Download: Photo Zoom for Facebook (Free)
7. Friends Feed
Available on: Chrome, Safari
If you're old enough to remember the first few years of Facebook, you will know that the news feed used to be a much more fun place to hang out.
Unfortunately, that's no longer the case.
You feed gets clogged up with posts that you have no interest in—either because other friends liked it or because a company has paid to get its content in front of your eyes.
The Friends Feed extension gets rid of these posts. The only updates you'll see will either originate from your friends or from pages and people you actively follow.
Download: Friends Feed (Free)
8. Friend Convert
Available on: Chrome
If you are the manager of a large Facebook group, you might want to check out the Friend Convert Facebook Chrome extension. It lets you add friends to a group en mass, but also allows you to bulk-remove people from a group.
This is especially useful if the group operates on the premise of a membership, wherein the list of people with an active membership is continuously in a state of flux.
Download: Friend Convert (Free)
9.
Multiple Tools for Facebook Available on: Chrome
Managing your Facebook profile, page, or group can be a labor-intensive task. Indeed, most businesses now have to employ an entire social media team just to keep on top of the never-ending slew of messages and contact requests.
Multiple Tools is a Facebook extension that specializes in automation. It has a dashboard that will display all your analytics, as well as ways to automate privacy settings for posts, message downloading, and incoming and outgoing friend and group requests.
You can also use the extension to block seen messages, block the message delivery mark, and even find out which groups your friends have joined.
NB: Remember, it is possible to use Messenger without Facebook if you don't want a full account.
Download: Multiple Tools for Facebook (Free)
10. Image Cleaner
Available on: Chrome
Facebook doesn't really want you to delete your photos.
Consequently, there is no way to delete your old images in bulk.
Sure, you can delete pictures on an individual basis, and that's fine for getting rid of an embarrassing snap from a night out. However, if you want to go on a photo purge, Facebook makes it near-impossible without entirely deleting your account.
Image Cleaner solves the problem. You can delete photos, albums, and videos with a single click (no confirmation screen). It also adds a checkbox to media items so you can select and delete multiple files at the same time.
Download: Image Cleaner (Free)
Should Facebook Natively Include These Features?
It's somewhat sad that we have to turn to third-party Facebook extensions to access some of this functionality. If anything, their absence is an indictment of Facebook's true guiding principles. As has been the case for several years, it is a case of profit over user experience.
Hopefully, Facebook changes its stance and makes the site more user-friendly, but we don't have high hopes.
For now, these extensions will have to suffice.
5 Chrome extensions that will transform the Facebook web interface*
April 13, 2016BrowsersTechnology
Interesting fact: the average user visits Facebook* 14 times a day. But the more closely you contact, the more claims arise - it just so happened in our life. It is good that some of the shortcomings of the social network can be corrected. And here are five Chrome extensions to help change Facebook* for the better.
Share
0Nothing drastically changed on Facebook* for a long time. New reactions on the "Like" button don't count. But does this mean that the social sphere has approached its ideal? Far from it. So think millions of people who install special shells to make Facebook* even more convenient. Perhaps you will like them too.
Facebook* ReFresh
Every day, the Internet community finds the very topic that is chewed up dozens of times with gusto.
Disgraced athletes, fraudulent businessmen and even zoo residents fall under the distribution. By the middle of the day, the monotonous digital noise starts to get boring, which is where the main, as it seems to me, feature of Facebook * ReFresh comes in handy - filtering publications by keywords. Click on the extension icon and enter, for example, "goat". Before our eyes, disgraced athletes, fraudulent businessmen and even zoo residents will disappear from the tape. Joke, of course. Facebook* ReFresh does not know how to draw analogies, but it will save you from all sorts of offshore companies with a bang.
And a couple more interesting possibilities. The extension clears the feed of everything superfluous and leaves only news in it. This takes into account the size of your screen and displays information in one, two, three columns or more. Finally, Facebook* ReFresh promises a special effect for likes, but somehow it doesn't work.
Facebook* Flattener
The description of the extension says that "Facebook Flattener frees up the social network interface: removes the third column (and ads), makes the news feed wider, gets rid of borders and shadows.
" And indeed it is. The result is a slightly more concise Facebook * without serious outside interference.
A must if you like extremely simple interfaces. The only caveat: the attached images do not scale to the entire width of the block, which does not look very good.
Facebook* Flat
Facebook* Flat offers a fairly drastic change that will definitely take some getting used to. Judge for yourself: the side navigation bar looks completely different, and it does not disappear from the screen as you scroll through the feed. This can get in the way, although the benefits are obvious: there is a slider to disable the extension, an arrow to quickly move to the top of the feed, a link to your friends' upcoming birthdays, and much more.
Significantly, Facebook* Flat, to quote, "improves text readability." The font and its size actually change, but I do not undertake to evaluate the benefits of such a transformation for everyone and everyone.
By the way, it is this shell that is quite popular in the Chrome extension store.
appbox fallback https://chrome.google.com/webstore/detail/kadbillinepbjlgenaliokdhejdmmlgp?hl=en
Facebook* Color Changer
The name says it all. Facebook* Color Changer replaces the background colors of the social network. And that's it. Not thick, however. On the other hand, many users would like to see a dark theme, and here it is. Your choice: gentle sand, scorching pink, pleasant menthol and much more - over 20 options in total. To apply the theme, you do not need to reload the page - just hover over the option of interest.
By the way, Metal and Folio for Android also offer alternative Facebook skins*. Try them if you look into the social network from your phone.
SocialReviver
SocialReviver is a flexible tool for customizing the look and feel of Facebook*. By default, the extension cancels the latest updates to the social network interface and brings it back to the classic 2011 state.
The knife includes the layout of the news page and user profile, the top control panel, chat, and other elements. All changes can be adjusted at your discretion - welcome to the settings. Other interesting options are also available there. I'll just mention a couple of them: the shell returns the mobile phone icon if your friends are available for communication through the mobile client (removed not so long ago), and also hides the information that you have read the message.
Do you remember and think the previous Facebook* interface was terrible? Then use SocialReviver specifically to spend less time on the social network. :)
*Activities of Meta Platforms Inc. and its social networks Facebook and Instagram are prohibited in the territory of the Russian Federation.
Top 5 Chrome extensions to improve Facebook • Oki Doki
Facebook is still the leading social networking platform, but it could use some improvements. Luckily, various settings can smooth out and enhance your experience on both Classic and New Facebook.
In this article, we will look at ways to customize Google Chrome using Facebook extensions.
Ready to improve your Facebook experience in every way? Then start using these Chrome extensions for Facebook.
1. VLC Video Downloader
VLC Video Downloader makes it easy to create video playlists and download videos from both classic and new Facebook. To start saving and loading videos, follow these steps.
Programs for Windows, mobile applications, games - EVERYTHING is FREE, in our closed telegram channel - Subscribe :)
- Find the video you want to save.
- Click on the video to enlarge it.
- The VLC Video Downloader extension icon will now display a number indicating that a video has been detected.
- Click the icon to open a list of all detected videos. Every time you open a video, it automatically appears in this list.
- You can play the video, download it or add it to your playlist. However, if you close the tab before adding the video to the playlist, it will disappear.
- Once you add a video to your playlist, you can rename it, play it, and download it from anywhere.
Download: VLC Video Downloader for Chrome (Free)
2. Hover +
Hover Zoom + allows you to automatically enlarge images on Facebook. Just move your cursor over the image and you will increase its size.
In addition to zooming in on photos, you can also see entire images that are usually cropped. This makes Hover Zoom+ a great option for image previews on multi-photo posts. The extension options also allow you to change parameters such as scaling delay, positioning, border color, and others.
For more control, Hover Zoom+ comes with some useful hotkeys. When you hover over a larger image, you can automatically open the image in a new window, new tab, or even download it with a single keystroke.
Unfortunately, the extension doesn't work with the new Facebook, so you'll want to upgrade to Facebook Classic.
Download: Hover Zoom + for Chrome (Free)
3.
Timely Timely offers a simple measure of accountability for those who are concerned about their performance. If you want an easy way to chart how much time you spend on any version of Facebook, look no further.
When you open Facebook in a new tab, Timely starts two stopwatches. The right stopwatch shows how much time has passed since you opened Facebook in the tab. The left stopwatch displays the total time spent on Facebook for the day. Both stopwatches change color as you spend more time until both timers turn red.
If Timely Solitude doesn't help stop overindulgence, you should learn how to do a social media detox.
Download: Timely for Chrome (Free)
4. FriendFilter for Facebook
FriendFilter for Facebook allows you to easily manage your entire friends list and track their interaction with your profile. After installing the extension, simply follow the instructions to verify which version of Facebook you're using, confirm your username, and sync your friends list.
After that, you can change layouts on Facebook.
When FriendFilter has access, there are two powerful data manipulation tools. The Friends section divides friends into active and inactive depending on their participation in your profile. When you look at your friends, you'll see their full name and their interaction with your profile broken down into likes, comments, and posts.
You can access their profiles on their behalf, whitelist them to prevent accidental deletion, or cancel them. With the ability to search, select all, or no selection, you can quickly sort and select anyone.
In the Dashboard section, you can view an activity graph showing likes, comments, and posts. There is also a friends chart that gives you data on active, inactive, whitelisted and unregistered users. Additional data is presented in the form of a list of 10 best friends and a small statistical summary.
The only downside is that the FriendFilter Pro subscription is required to go through the default settings for time, actions, comments, and shares.
Download: FriendFilter for Facebook for Chrome (Free, subscription available)
5. Social Book Post Manager
Social Book Post Manager helps you manage your posts from your Facebook activity log. While it currently only works with classic Facebook, the ability to batch delete, hide, show, and show dissimilar posts makes it privacy-critical.
Once you're on Classic Facebook, go to your activity log, or go there automatically by clicking on the extension and clicking OK. Then click on the extension again to open all your filters. By default, it will automatically select the current year and month.
To get the best results, you need to be as specific as possible with filters. Once you add the text filter, you will see any results highlighted for clarity. After you click the Delete, Hide/Show, or Doesn't Look Like button, it will attempt to make changes to your posts.
If no results appear, the extension will let you know. If this is the case, then pre-crawling the page or slowing down the speed can increase the chances of finding your post.
