Skip to content

Commit

Permalink
Merge pull request #8 from vatz88/facebook-msg-redesign
Browse files Browse the repository at this point in the history
Facebook message redesigned
  • Loading branch information
rahulkapoor90 committed Oct 14, 2017
2 parents ae54b47 + 370b323 commit 6789c34
Show file tree
Hide file tree
Showing 13 changed files with 179 additions and 150 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Expand Up @@ -45,3 +45,7 @@ $RECYCLE.BIN/
Network Trash Folder
Temporary Items
.apdisk

# Project config files
.vscode
.jshintrc
24 changes: 13 additions & 11 deletions README.md
@@ -1,35 +1,36 @@
# This is Clickbait

Want to try this right away? [Install it from the Chrome Web Store](https://chrome.google.com/webstore/detail/this-is-clickbait/ppklhdlfnadnlnllnenceabhldpnafjm)! (Special thanks to Saurabh Mathur)

![](https://i.ytimg.com/vi/pHNbitDDW3A/maxresdefault.jpg)

*Clickbait: content whose main purpose is to attract attention and encourage visitors to click on a link to a particular web page.*

People continually fall for clickbait. Why? As Wired mentioned in [its article on the psychology of clickbait](https://www.wired.com/2015/12/psychology-of-clickbait/): "Whether you think clickbait is on the rise, obscurant and self-negating, not such a big deal, or the root of all evil, one thing is clear about it: It's increasingly hard to pin down."
People continually fall for clickbait. Why? As Wired mentioned in [its article on the psychology of clickbait](https://www.wired.com/2015/12/psychology-of-clickbait/): "Whether you think clickbait is on the rise, obscurant and self-negating, not such a big deal, or the root of all evil, one thing is clear about it: It's increasingly hard to pin down."

A lot of editors use clickbait in an effort to manipulate you or grab your attention. The difference with clickbait is you're often aware of this manipulation, and yet helpless to resist it. It's at once obvious in its bait-iness, and somehow still effective bait.

But with this small Chrome extension utilizing deep learning, one can easily identify whether an article on Facebook is clickbait or not.

# Screenshots
## Screenshots

## If the article is "Not clickbait"
### If the article is "Not clickbait"

![](https://i.imgur.com/Vse7SvM.png)

## ...And, if it is:
### ...And, if it is

![](https://i.imgur.com/T9bmxE1.png)

## For others, it lets you know the percentage of "clickbaitiness":

![](https://i.imgur.com/mUvJQCG.png)

# Why Facebook?
## Why Facebook?

Because I think that's where the majority of clickbait articles are posted, and if you can see that the article is clickbait from within Facebook itself, then the problem is solved.

# Installing This Chrome Extension
## Installing This Chrome Extension

Option 1: From the Chrome Web Store

Expand All @@ -44,11 +45,12 @@ Option 2: From source
1. Select the directory where you cloned this repo
1. Visit Facebook!


# Media:
## Media

- [http://www.addictivetips.com/web/how-to-identify-clickbait-on-facebook/](http://www.addictivetips.com/web/how-to-identify-clickbait-on-facebook/)
- [http://wwwhatsnew.com/2017/02/04/una-extension-para-chrome-para-saber-si-un-articulo-en-facebook-hace-uso-del-clickbait/](http://wwwhatsnew.com/2017/02/04/una-extension-para-chrome-para-saber-si-un-articulo-en-facebook-hace-uso-del-clickbait/
)

- [http://wwwhatsnew.com/2017/02/04/una-extension-para-chrome-para-saber-si-un-articulo-en-facebook-hace-uso-del-clickbait/](http://wwwhatsnew.com/2017/02/04/una-extension-para-chrome-para-saber-si-un-articulo-en-facebook-hace-uso-del-clickbait/)

- [Product Hunt - https://www.producthunt.com/posts/this-is-clickbait/](https://www.producthunt.com/posts/this-is-clickbait/)
- [Reddit /r/india - https://www.reddit.com/r/india/comments/5r637u/i_made_a_chrome_extension_which_detects/](https://www.reddit.com/r/india/comments/5r637u/i_made_a_chrome_extension_which_detects/)

- [Reddit /r/india - https://www.reddit.com/r/india/comments/5r637u/i_made_a_chrome_extension_which_detects/](https://www.reddit.com/r/india/comments/5r637u/i_made_a_chrome_extension_which_detects/)
62 changes: 0 additions & 62 deletions facebook.js

This file was deleted.

35 changes: 17 additions & 18 deletions manifest.json
Expand Up @@ -5,34 +5,33 @@
"manifest_version": 2,
"description": "Shows whether the article is clickbait or not on Facebook & YouTube",
"permissions": [
"http://www.facebook.com/*", "https://www.facebook.com/*","https://clickbait-detector.herokuapp.com/*"
"http://www.facebook.com/*", "https://www.facebook.com/*", "https://clickbait-detector.herokuapp.com/*"
],
"web_accessible_resources": [ "locales/*"],
"web_accessible_resources": ["locales/*"],
"browser_action": {
"default_icon": {
"19": "logo16.png",
"38": "logo48.png"
"19": "media/logo16.png",
"38": "media/logo48.png"
}
},
"icons": {
"128": "logo128.png",
"16": "logo16.png",
"48": "logo48.png"
"128": "media/logo128.png",
"16": "media/logo16.png",
"48": "media/logo48.png"
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
"homepage_url": "https://github.com/rahulkapoor90/This-is-Clickbait",
"content_scripts": [
{
"matches": ["http://www.facebook.com/*", "https://www.facebook.com/*"],
"js" : [ "facebook.js"],
"run_at" : "document_idle",
"all_frames" : false
"content_scripts": [{
"matches": ["http://www.facebook.com/*", "https://www.facebook.com/*"],
"js": ["src/facebook.js"],
"run_at": "document_idle",
"all_frames": false
},
{
"matches": ["http://www.youtube.com/*", "https://www.youtube.com/*"],
"js" : [ "youtube.js"],
"run_at" : "document_idle",
"all_frames" : false
"matches": ["http://www.youtube.com/*", "https://www.youtube.com/*"],
"js": ["src/youtube.js"],
"run_at": "document_idle",
"all_frames": false
}
]
}
}
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
80 changes: 80 additions & 0 deletions src/facebook.js
@@ -0,0 +1,80 @@
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-73159092-1']);
_gaq.push(['_trackPageview']);

(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();

const facebook_clickbait = function (node) {

const images = [...node.getElementsByClassName('mbs _6m6 _2cnj _5s6c')];

images.forEach(function (el) {
var links = el.getElementsByTagName('a');
var link = "";
for (var i = 0; i < links.length; i++) {
link = (links[i].innerHTML);
}
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
var data = JSON.parse(request.responseText);
var clickbait = data.clickbaitiness;
var clickbait_banner = el.appendChild(document.createElement("div"));
if (clickbait < 60) {
clickbait_banner.style.textDecoration = "underline";
clickbait_banner.style.color = "rgb(0, 128, 0)";
clickbait_banner.style.textAlign = "right";
clickbait_banner.textContent = "Not a Clickbait";

} else if (clickbait > 90) {
clickbait_banner.style.textDecoration = "underline";
clickbait_banner.style.color = "rgb(128, 0, 0)";
clickbait_banner.style.textAlign = "right";
clickbait_banner.textContent = "This is a Clickbait";
} else {
clickbait_banner.style.textDecoration = "underline";
clickbait_banner.style.color = "rgb(" + Number((clickbait) * 1.28).toFixed(0) + ", " + Number((100 - clickbait) * 1.28).toFixed(0) + ", 0)";
console.log(clickbait_banner.style.color);
clickbait_banner.style.textAlign = "right";
clickbait_banner.textContent = clickbait + "% Clickbait";
}
console.log(clickbait_banner);
console.log(el);
}
}
};

request.open("GET", "https://clickbait-detector.herokuapp.com/detect?headline=" + link, true);
request.send();
});

};

const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.nodeType === 1) { // ELEMENT_NODE
facebook_clickbait(node);
}
});
});
});

const config = {
attributes: false,
childList: true,
characterData: false,
subtree: true
};

observer.observe(document.body, config);

facebook_clickbait(document.body);
Empty file added src/twitter.js
Empty file.
65 changes: 65 additions & 0 deletions src/youtube.js
@@ -0,0 +1,65 @@
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-73159092-1']);
_gaq.push(['_trackPageview']);

(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();

const youtube_clickbait = function (node) {

const images = [...node.getElementsByClassName('watch-title')];

images.forEach(function (el) {
var link = el.innerHTML;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
var data = JSON.parse(request.responseText);
var clickbait = data.clickbaitiness;
if (clickbait < 60) {
let html = "<ul style='position:absolute;top:30px;right:10px;padding:5px;font-size:12px;line-height:1.8;background-color:#2ecc71;color:#fff;border-radius:5px'>👍 Not Clickbait</ul>";
el.insertAdjacentHTML('afterend', html);
} else if (clickbait > 90) {
let html = "<ul style='position:absolute;top:30px;right:10px;padding:5px;font-size:12px;line-height:1.8;background-color:#F27935;color:#fff;border-radius:5px'>💁 This is Clickbait</ul>";
el.insertAdjacentHTML('afterend', html);
} else {
let html = "<ul style='position:absolute;top:30px;right:10px;padding:5px;font-size:12px;line-height:1.8;background-color:#e67e22;color:#fff;border-radius:5px'>👻 " + clickbait + "% clickbait</ul>";
el.insertAdjacentHTML('afterend', html);
}
}
}
};

request.open("GET", "https://clickbait-detector.herokuapp.com/detect?headline=" + link, true);
request.send();
});

};

const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.nodeType === 1) { // ELEMENT_NODE
youtube_clickbait(node);
}
});
});
});

const config = {
attributes: false,
childList: true,
characterData: false,
subtree: true
};

observer.observe(document.body, config);

youtube_clickbait(document.body);
59 changes: 0 additions & 59 deletions youtube.js

This file was deleted.

0 comments on commit 6789c34

Please sign in to comment.