How to Build a Front‑End Tabloid System for Your Team

The article introduces the "Zhoucai Cloud Front‑End Tabloid" – a weekly curated newsletter that aggregates over 1,000 articles across 50+ categories, serving as a knowledge base for the team.

It explains the motivation behind the system: to create a continuous learning atmosphere by allowing team members to easily share interesting articles, categorize them, and receive a weekly digest.

Design of the Tabloid System

The system consists of three core modules: submission, aggregation, and scheduled delivery. A simple, one‑click submission flow is implemented via a Chrome extension, enabling users to capture the current page’s title, description, and URL.

Chrome Extension Development

The extension is a standard web project with an additional manifest.json file. The popup page ( popup.html) provides the UI, while background scripts inject a content script ( recommend.js) into the active tab to extract article metadata.

{
  "name": "Zoo!",
  "browser_action": { "default_popup": "./popup.html" },
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["./contentScripts/zdata.js"],
    "run_at": "document_start"
  }]
}

The content script listens for a message ( GET_TOPIC_INFO) and returns the page title, URL, and meta description.

let doc = document;
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.message === 'GET_TOPIC_INFO') {
    let title = document.getElementsByTagName('title')[0].textContent;
    let descriptionEl = doc.querySelectorAll('meta[name=description]')[0];
    let description = descriptionEl ? descriptionEl.getAttribute('content') : title;
    sendResponse({ title: title.trim(), link: location.href, description: description.trim() });
  }
});

When the user clicks the submit button, the collected data is sent to a backend API for storage.

handleRecommendArticle: function () {
  let request = ajax({
    method: 'post',
    url: 'https://XXX/api/post',
    data: {
      'title': this.article.title,
      'desc': this.article.description,
      'category': this.article.category[1] || '默认分类',
      'link': this.article.link,
      'referrer': this.article.reporter
    }
  });
}

Tag Design

The team devised a multi‑dimensional taxonomy (foundation, language, architecture, selection, tools, summary, etc.) to make classification intuitive and to enable quick retrieval of past articles.

Installation

Developers can load the unpacked extension in Chrome via Settings → Extensions → Load unpacked, with developer mode enabled.

Aggregation and Rendering

The front‑end of the tabloid uses server‑side rendering (SSR) to display each issue and allow category‑based browsing.

Scheduled Delivery

Two delivery channels are implemented: a DingTalk robot that posts a feed‑card to a group, and an email service using Nodemailer to send the weekly digest.

const pushToRobot = async ({ data, title, nums }) => {
  const links = wrapperFeedcard({ data, nums });
  return axios("https://oapi.dingtalk.com/robot/send?", {
    method: "post",
    params: { access_token: "XXXX" },
    data: { feedCard: { links }, msgtype: "feedCard" }
  });
};

const nodemailer = require("nodemailer");
let transporter = nodemailer.createTransport({
  service: "qiye.aliyun",
  port: 25,
  host: "smtp.mxhichina.com",
  secureConnection: true,
  auth: { user: "[email protected]", pass: "xxx" }
});
let mailOptions = {
  from: '"政采云前端小报" <[email protected]>',
  to: "[email protected]",
  cc: ["[email protected]"],
  html: '邮件内容'
};
transporter.sendMail(mailOptions);

The article concludes that, although the tabloid system is lightweight, its thoughtful design—from submission to delivery—effectively promotes a culture of continuous learning and knowledge sharing within a front‑end team.