手把手教你打造属于自己团队的前端小报系统_语言 & 开发_政采云前端团队

QCon 演讲火热征集中，快来分享技术实践与洞见！了解详情 



 写点什么

前言

经常关注我们政采云前端团队的同学，对下面这张图应该不陌生~

每周五下午我们会定时推送一期前端小报，里面汇集了一些精选的前端文章~

下面这张图就是政采云前端小报的官方站点的截图，这个站点里面有我们历史每期的汇总~

至今前端小报已经 93 期，汇聚了 1000+ 文章，覆盖了 50+ 大小分类，可谓是一个非常好的知识库了~

前端小报的由来

持续学习是每个工程师必备的素养，一个成长性的团队也同样需要这样一个持续学习的氛围。那么如何通过技术的手段来帮助团队培养持续学习的氛围呢？

政采云前端小报因此应运而生，它主要包含投稿、汇总沉淀、定时投递三大核心模块，这样的一个系统可以让大家轻松的将自己喜欢的文章分享到团队内部，并且将文章进行分类沉淀，营造团队的知识库，方便大家查阅，同时小报系统也会在每周五进行定时推送，方便大家了解最新的技术动向，前端小报系统是一个帮助我们营造团队内部分享和学习氛围的得力帮手~

那么这样的一个小报系统是如何实现的呢？

如何设计一个小报系统

投稿

相信大家看到好的文章的时候，总会有忍不住想分享给别人的冲动，一个简单易用的投递功能可以很方便的满足大家的分享欲望，将好的文章输入到团队，帮助其他同学~

一个简单容易的投稿功能，我们需要解决两件事情：

1、如何能在看到好文章时，满足分享的冲动

2、如何对投稿的文章进行归类收集，方便沉淀与查找

如果是一个单独的录入系统，手动录入，这种方式操作繁琐，很容易打消大家的热情，平时在浏览器看文章的时候，我们经常将好的文章加入书签收藏，一键操作，方便快捷。那么如何能像浏览器书签收藏文章一样方便的去投稿呢？

很容易想到通过浏览器的扩展能力去做这个事情，Chrome 插件就提供了这样的能力

什么是 Chrome 插件

官方解释：谷歌插件是一种小型的用于定制浏览器体验的程序。它可以使用户根据个人需要或偏好来定制 Chrome 的功能和行为，它们基于 Web 技术（HTML，JavaScript 和 CSS）构建。

说人话：开发一个 Web 项目，能够嵌入到 Chrome 浏览器中，同时能够通过一些特定的 Api 获取到一些能力，从而订制自己的插件功能

如何开发一个一键投稿的 Chrome 插件

首先创建一个项目，开发一个投稿功能页面。

此项目和普通 Vue 项目唯一的区别是根目录多了一个 manifest.json 文件。

创建 manifest.json：Chrome 通过识别项目根目录是否有 manifest.json 文件来识别是否为 Chrome 插件。

{     // 核心代码   "name": "Zoo！", // 扩展名   "browser_action": {      "default_popup": "./popup.html"  // 点击浏览器右上方插件小图标弹出的内容 html   },   "content_scripts": [  // 能够在  Web 页面内运行的 javascript 脚本     {       "matches": [        // 满足什么协议下进行调用         "http://*/*",          "https://*/*"       ],       "js": [         "./contentScripts/zdata.js" // 插入到网页的 JS 文件路径       ],         "run_at": "document_start" // 在document 加载时执行     }   ] }

复制代码

这样插件被打开时会默认加载 popup.html 页面的内容，效果如图：

如何获取文章标题、简介、URL

插件本身其实不能获取到当前页面的标题，但 Chrome 插件提供一种能够在当前页面动态插入固定 JS 脚本的能力，我们可以根据这种机制向当前页面插入一段 JS 脚本去获取页面的标题、简介和 URL，然后再通过消息机制将获取到的内容返回到插件中。

let host = this;// 获取当前窗口 id chrome.tabs.query({  active: true,  currentWindow: true}, function (tabs) {  let tabId = tabs.length ? tabs[0].id : null;  // 向当前页面注入 JavaScript 脚本   chrome.tabs.executeScript(tabId || null, {    file: './contentScripts/recommend.js'  }, function () {    // 向目标网页进行通信，向 recommend.js 发送一个消息     chrome.tabs.sendMessage(tabId, {      message: 'GET_TOPIC_INFO',    }, function (response) {      // 获取到返回的文章 title 、url、description       host.article.title = response.title;      host.article.link = response.link;      host.article.description = response.description;    });  });});

复制代码

recommend.js 监听消息，通过 addListener 我们可以监听来自 sendMessage 发出的消息，在 sendMessage 中定义 message 常量让我们可以在接收消息时对消息进行区分。

let doc = document;chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {  if (request.message === 'GET_TOPIC_INFO') {    // 获取 title     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()    });  } else if (request.message === 'SIGN_RELOAD') {    console.log('request, sender', request, sender);  }});

复制代码

点击投稿时，需要将数据发送到服务端做存储

// 投稿按钮点击事件 handleRecommendArticle: function () {  let request;  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    }  });}