如何开发一个一键投稿的 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;
chrome.tabs.query({
active: true,
currentWindow: true
}, function (tabs) {
let tabId = tabs.length ? tabs[0].id : null;
chrome.tabs.executeScript(tabId || null, {
file: './contentScripts/recommend.js'
}, function () {
chrome.tabs.sendMessage(tabId, {
message: 'GET_TOPIC_INFO',
}, function (response) {
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') {
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
}
});
}
效果图：
上面就是一个很轻量的 Chrome 插件的实现了，基于这样的一个 Chrome 插件，当我们看到喜欢的文章时，就可以一键分享给团队的小伙伴了~
当文章多了之后，如果没有有效的管理，文章会堆积杂乱，反而让大家失去了去学习的欲望，那么我们如何对投稿的文章进行归类收集，方便同学们查找自己需要的知识体系呢？
标签设计
- 标签分类
在标签分类上当时花了一些时间去设计，难点主要是什么样的分类维度能够让投稿人快速找到对应的分类，让查看人能够快速根据分类找到自己想要的文章， 以及如何能够快速找到往期文章等。
这就要求我们的分类需通俗易懂，且能够涵盖业务大部分文章的类型，最后我们是从基础、语言、架构、选型、工具、总结等多维度进行分类。
为了能够快速进行文章查找，这里将分类查看功能也集成在 Chrome 插件中。
安装插件
插件制作完成之后，其他同学就可以将你的插件安装包安装到浏览器中。因为墙的原因，这里没有选择将插件上传到 Chrome 应用商店，我们是直接安装到本地， 下图为打包后的项目目录结构：
安装步骤：浏览器选择设置 —> 扩展程序 —> 加载已解压的扩展程序 —> 选择文件目录即可。同时，开发者模式记得打开。
关于 Chrome 扩展 插件的官方 详细文档请移步 链接 查看
汇总沉淀
很普通一个前端项目，这里不再过多陈述，主要是能够看到每一期文章和按照分类进行快速查找，并统一收录 文章入口。其中，前端页面采用 SSR 服务端渲染实现。
定时投递
到这里小报系统的前台展示页面已经完成，那么如何将每一期的优质文章更及时且方便的让同学能够阅读到呢，让大家及时的去了解新技术，扩充视野。后来我们想可以通过主动触达，定时提醒等方式将期刊主动发送给团队同学。 因此在上述基础上单独设计 了一个推送服务，定时将每一周的小报推送到钉钉群和前端邮件组。
- 通过钉钉群机器人，每周五将期刊发送到前端群里。详情见官方开发 手册
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);
- 定时发布掘金
有一天我们的掘金运营小姐姐和我说，每周五快下班时都要进行文章发布，太痛苦了，耽误我下班约会，掘金为啥没有定时发送功能？ 我说好吧，那咱们自己开发个定时发布功能吧，想知道如何实现掘金定时发布功能，可在评论区留言讨论。
整体设计
