Building a Chrome Extension Flip-Pen Remote Control with WebSocket

Introduction

The author shares the motivation behind creating a "flip‑pen" Chrome extension that enables remote page navigation using a smartphone, and outlines the article's goal to document the implementation and give a brief overview of Chrome extensions.

Chrome Extension Overview

A Chrome extension consists of several parts: Background Scripts, UI Elements, popup.html , options.html , Content Scripts, and manifest.json . Each component runs in the browser and can be built with familiar HTML, CSS, and JavaScript.

Background Scripts – handle lifecycle events and message passing.

UI Elements – icons, tooltips, right‑click menus, and pop‑up pages.

popup.html – the small window shown when the extension icon is clicked.

options.html – configuration page accessed via chrome://extensions/ .

Content Scripts – JavaScript injected into web pages.

manifest.json – declares scripts, permissions, and other metadata.

Key Chrome Extension APIs

Important APIs include accessibilityFeatures , alarms , bookmarks , browserAction , browsingData , commands , contentSettings , contextMenus , cookies , debugger , devtools , downloads , storage , tabs , tts/ttsEngine , vpnProvider , and webRequest . Full reference: Chrome Extension API Index .

Development and Debugging

Developers write the four main files (background, content, popup, options) and a manifest.json . Debugging is performed via the Chrome extensions page ( chrome://extensions ) where background scripts, popup, and content scripts can each be inspected using the DevTools.

Installation Options

Publish to the Chrome Web Store (not always accessible in China).

Package as a .crx file.

Load the unpacked source folder via the extensions page.

For the latter two, enable Developer Mode, then drag the .crx file or click “Load unpacked” to select the folder.

Flip‑Pen Plugin Implementation

WebSocket Server (Node.js + socket.io)

var sockets = {};

io.on('connection', function(socket) {
  socket.on('message', function(data) {
    console.log(data);
    if (sockets[data.id]) {
      sockets[data.id].emit('message', data.data);
    }
  }); // 创建会话
  socket.on('new', () => {
    const id = socket.id;
    sockets[id] = socket;
  }); // 移除
  socket.on('disconnect', () => {
    const id = socket.id;
    if (sockets[id]) {
      delete sockets[id];
    }
  });
});

Content Script

import ext from "./utils/ext";
import io from "socket.io-client";
const conf = { up: 38, down: 40, left: 37, right: 39 };
const URL = "https://pen.zhengqingxin.com";
var flipPen = {};
function onRequest(request) {
  if (request.action === "process-page") {
    if (flipPen.socket) {
      chrome.runtime.sendMessage({ url: flipPen.url });
      return;
    }
    var socket = io(URL);
    socket.on("connect", function() {
      // 获取建立成功的 socketId，生成带有 socketId 参数的链接，发送给 popup.html
      socket.emit("new");
      var rcUrl = `${URL}/index.html?id=${socket.id}`;
      chrome.runtime.sendMessage({ url: rcUrl });
      flipPen = { url: rcUrl, socket };
      // 实现向页面发送上，下，左，右的键盘消息
      socket.on("message", function(data) {
        if (data.action) {
          var keyCode = conf[data.action];
          var evt = new KeyboardEvent("keydown", { keyCode: keyCode, which: keyCode });
          document.dispatchEvent(evt);
        }
      });
    });
  }
}
// 接收从 popup.html 传来的消息，建立 websocket 连接
ext.runtime.onMessage.addListener(onRequest);

Popup Script (QR‑code generation)

import ext from "./utils/ext";
import QRCode from "qrcode";

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  const { url } = message;
  var canvas = document.getElementById("canvas");
  QRCode.toCanvas(canvas, url);
});

ext.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  var activeTab = tabs[0];
  chrome.tabs.sendMessage(activeTab.id, { action: "process-page" });
});

Remote Control Page

The remote page establishes a WebSocket connection to the same server; when the user presses directional buttons, it sends messages containing the previously obtained socketId so the server can forward them to the target page.

Conclusion

The flip‑pen extension demonstrates that a functional Chrome plugin can be built with less than a hundred lines of code, covering background handling, content‑script communication, QR‑code generation, and WebSocket‑based remote control.