The story of my first Chrome Extension and its tragic demise
I had the idea in my mind that I wanted to create and have my own chrome extension for a few years now.
Unfortunately I have never had a great idea or something I would want to use.
The problem
I wanted to cut down on my Facebook scrolling and timewasting. I often found myself opening up Facebook in chrome just out of habbit to see what is happening. Most of the time it was just filled with junk posts from pages and things people share. This was not my friends posts, this was not why I joined this website!
Why not just deactivate/ delete Facebook
I do find it useful (and required as a 25y.o) to occasionally check Facebook. My friends often tag me in posts and things of this nature. So I could not quite delete it for good!
Introducing KILL FACEBOOK
Kill Facebook was the answer to my problem. I wanted a simple extension that had a toggle function with the functionality to redirect me from Facebook to Messenger.
This solution would redirect me to Messenger so I can chat message my friends but not aimlessly waste time scrolling my life away!
The Extension
The UI
I wanted the extension to be simple! One button to toggle the state of the program. If the program is toggled on and you navigate to Facebook, you will be sent to Messenger instead!
<body style="width: 170px; height: 100px; text-align: center;">
<div style="font-weight:bold; font-size: 1.3em;">Kill Facebook</div>
<h5>Enabled:</h5>
<label class="switch">
<input id="redirect" type="checkbox"></input>
<span class="slider round"></span>
</label>
<script src="popup.js"></script> <!--- powers the form --->
</body>
The script powering the UI (popup.js)
// get the checkbox element
let redirectCheckbox = document.getElementById('redirect');
chrome.storage.sync.get('redirect', function (data) {
// ensure the checkbox is checked relative to the stored state
redirectCheckbox.checked = data.redirect;
});
redirectCheckbox.onclick = function (element) {
chrome.storage.sync.get('redirect', function (data) {
var newStatus = !data.redirect
redirectCheckbox.checked = newStatus;
chrome.storage.sync.set({ redirect: newStatus })
if(newStatus) {
// this section is to redirect if facebook is open and the extension state is toggled to on
chrome.tabs.getAllInWindow(null, function(tabs){
var regex = /facebook.com/g;
for (var i = 0; i < tabs.length; i++) {
var tabUrl = tabs[i].url;
if(tabUrl !== undefined) {
var result = tabUrl.match(regex);
if(result !== null) {
// go to messenger
chrome.tabs.update(tabs[i].id, { url: "https://www.messenger.com" });
}
}
}
});
}
});
};
The background script
// simple storage for a boolean value
// this value is essentially to store the true/false state of the redirect button
chrome.runtime.onInstalled.addListener(function () {
chrome.storage.sync.set({ redirect: true }, function () {
});
});
// add a listener to redirect the tab to the requested url
chrome.runtime.onMessage.addListener(function (request, sender) {
chrome.tabs.update(sender.tab.id, { url: request.redirect });
})
Actions to take if the URL is Facebook
The manifest.json has a field allowing you to run a script if the url matches your criteria
"content_scripts": [
{
"matches": [
"*://*.facebook.com/*"
],
"js": [
"redirect.js"
]
}
],
In this case redirect.js will run if the URL of the tab is on the Facebook domain.
Redirect.js
chrome.storage.sync.get('redirect', function (data) {
// if the redirect function is on
if (data.redirect) {
// redirect using background helper to messenger
chrome.runtime.sendMessage({ redirect: "https://www.messenger.com" });
}
});
The Final Chapter
Everything was in order! The extension while simple functioned nicely and I felt is was fully featured. The remaining task is to publish it on the chrome extension store.
The above image really ends the chapter of Kill Facebook.
This was the email I received as to why my beautiful extension was rejected.
Now what is "Spam and Placement in the Store"
I investigated this reason and one of the criteria to have an application accepted on the Chrome store is it must not
Drive affiliate traffic to a website.
Well I think that's the end of the saga. That is really the core of the idea, code and thinking behind Kill Facebook.
Hopefully my next Chrome extension will have a better outcome!
Your disgruntled developer,
John