Concept
We have an extension that makes the noise on Facebook disappear, focusing on the status page and prompting you to start an actual (video) conversation with one of your friends.
It’s a nice idea I thought. Sadly, it didn’t work at all.
Here’s what I did
- Setup a secure socket server
var https = require('https');
var fs = require('fs'); // Using the filesystem module
var url = require('url');
var socket = require('socket.io');
var options = {
key: fs.readFileSync('my-key.pem'),
cert: fs.readFileSync('my-cert.pem')
};
function handleIt(req, res) {
var parsedUrl = url.parse(req.url);
var path = parsedUrl.pathname;
if (path == "/") {
path = "popup.html";
}
fs.readFile(__dirname + path,
// Callback function for reading
function (err, fileContents) {
// if there is an error
if (err) {
res.writeHead(500);
return res.end('Error loading ' + req.url);
}
res.writeHead(200);
res.end(fileContents);
}
);
console.log("Got a request " + req.url);
}
var io = require('socket.io').listen(httpServer);
io.sockets.on('connection', function (socket) {
console.log("We have a new client: " + socket.id);
socket.on('chatmessage', function (data) {
console.log("message: " + data);
socket.broadcast.send(data);
});
// socket.on('otherevent', function(data) {
// console.log("Received: 'otherevent' " + data);
// });
socket.on('disconnect', function() {
console.log("Client has disconnected");
});
});
var httpServer = https.createServer(options, handleIt);
httpServer.listen(8080, function(){
console.log("8080! listen up!");
});- Populate popup.html
<html>
<head>
<style>
body {
font-size: 30px;
background: yellow;
width: 300px;
height: 300px
}
</style>
<!-- <script src="jquery.js"></script> -->
<script src="p5.js" type="text/javascript"></script>
<script src="my-js.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
<script src="p5.dom.js" type="text/javascript"></script>
<script src="socket.io.js" type="text/javascript"></script>
<script src="socket-stuff.js" type="text/javascript"></script>
<body>
<div id="status"></div>
<div id="thevideo" width="100" height="100"></videos>
<div id="messages">
No Messages Yet
</div>
<input type="text" id="message" name="message">
<input type="submit" value="submit">
<!-- <input type="submit" value="submit" onclick="sendMessage(document.getElementById('message').value);"> -->
</body>
</head>
</html>- Keep socket stuff in a separate file because I was getting errors
var socket = io.connect("https://104.131.109.131:8080");
socket.on('connect', function() {
console.log("Connected");
});
socket.on('chatmessage', function (data) {
console.log(data.text);
chrome.runtime.sendMessage({msg:"socket", text:data.text}, function(response){});
document.getElementById('messages').innerHTML = "" + data + "" + document.getElementById('messages').innerHTML;
});
function sendMessage (message) {
console.log("chatmessage: " + message);
socket.emit('chatmessage', message);
};- Still without success, I became superstitious and started trying chromes tabs.sendMessage function and p5’s createCapture
var capture;
function setup() {
createCanvas(400,400);
background(255);
capture = createCapture(VIDEO);
capture.size(320, 240);
}
function draw(){
// image(capture, 0, 0, 320, 240);
ellipse(width/2, height/2, 50, 50);
noStroke();
}
//https://developer.chrome.com/extensions/omnibox
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response);
});
});- Then turned to peer - figured I would try building that on a regular webpage first
<html>
<script src="peer.min.js"></script>
<script type="text/javascript">
// We'll use a global variable to hold on to our id from PeerJS
var peer_id = null;
//your own video that's gonna get beamed to videochat channel
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// my video has to show, so this is the getUserMedia for that:
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, function(stream) {
my_stream = stream;
var videoElement = document.getElementById('myvideo');
videoElement.src = window.URL.createObjectURL(stream) || stream;
videoElement.play();
//using Shawn's peer server
peer = new Peer({host: 'liveweb.itp.io', port: 9000, path: '/'});
// Get an ID from the PeerJS server 5
peer.on('open', function(id) {
console.log('My peer ID is: ' + id);
peer_id = id;
});
}
}
</script>
</html>- That didn’t work.
The Facebook delayed disappearance (1000 ms) worked but not properly. Like the menubar, groups etc would go away, as well as text statuses but not entire divs of news feed items.
And there was this ever present error:
Conclusion
I’d been trying for a few days now, battling errors one by one making progress bit by bit with due encouragement and help (Kyle/Shawn/Sam/StackOverflow). I figured it was time to throw in the towel.
Code on Github
https://github.com/osehgol/chrome-extension-example