I am trying to build a chrome extension: a watch-party for the netflix but not able to configure the socket.io connections.
Here is the manifest.json file:
{
"manifest_version": 3,
"name": "Netflix Watch Party",
"version": "1.0.0",
"permissions": [
"activeTab",
"storage",
"scripting",
"webNavigation",
"tabs",
"notifications",
"management"
],
"host_permissions": [
"*://www.netflix.com/watch*",
"http://localhost:5000/*"
],
"content_scripts": [
{
"matches": ["*://www.netflix.com/watch*"],
"js": ["content.js"],
"css": ["style.css"],
"run_at": "document_start"
}
],
"background": {
"service_worker": "background.js"
},
"content_security_policy": {
"extension_pages": "script-src 'self' http://localhost:5000; object-src 'self'"
}
}
and the background file which I am using:
import io from 'socket.io-client';
const socket = io("http://localhost:5000/")
chrome.runtime.onInstalled.addListener((details) => {
if (details.reason === "install") {
chrome.tabs.create({
url: "https://www.netflix.com/",
});
}
});
chrome.runtime.setUninstallURL(
"https://www.jotform.com/form-templates/category/feedback", () => {
chrome.windows.getCurrent((window) => {
window.Clerk?.signout()
})
});
chrome.webNavigation.onHistoryStateUpdated.addListener(function (details) {
if (details.url.startsWith("https://www.netflix.com/watch")) {
chrome.scripting.executeScript(
{
target: { tabId: details.tabId },
function: () => {},
},
() => {
chrome.scripting.executeScript(
{
target: { tabId: details.tabId },
files: ["content.js"],
},
() => {
chrome.scripting.insertCSS({
target: { tabId: details.tabId },
files: ["style.css"],
});
}
);
}
);
}
});
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if(message.action == 'joinRoom'){
console.log('Join room called')
handleJoinRoom(message.payload);
}
else if(message.action == 'createRoom'){
console.log('Create room called')
handleCreateRoom(message.payload);
}
else if(message.action == 'sendMessage'){
console.log('Send Message called')
handleSendMessage(message.payload);
}else{
console.error('Unknown action:', message.action);
}
})
function handleJoinRoom(payload) {
const { roomId, username } = payload;
console.log(`Joining room ${roomId} with username ${username}`);
socket.emit("join room", { roomId, username });
}
function handleCreateRoom(payload) {
const { roomId, username } = payload;
console.log(`Creating room ${roomId} with username ${username}`);
socket.emit('create room', {roomId, username });
}
// Function to handle sending a message
function handleSendMessage(payload) {
const { roomId, username, message } = payload;
console.log(`Sending message in room ${roomId} from ${username}: ${message}`);
socket.emit("sendMessage", { roomId, username, message });
}
socket.on("user joined", (user) => {
chrome.runtime.sendMessage({ action: "userJoined", payload: user });
});
socket.on("user left", (user) => {
chrome.runtime.sendMessage({ action: "userLeft", payload: user });
});
socket.on("participants", (users) => {
chrome.runtime.sendMessage({ action: "participants", payload: users });
});
socket.on("chat message", (message) => {
chrome.runtime.sendMessage({ action: "chatMessage", payload: message });
});
I tried to found-out in the internet that it is some sort of issue with the background file and chrome apis working. Can anyone pls help with this.
