干活心累？试试“鸡汤来喽”，TNN的，快喝！-CSDN博客

大家好，我是石小石！一个热爱技术分享的开源社区贡献者，小册《油猴脚本实战指南》作者。

鸡汤来喽

这几天干活心累，闲暇之余就会看看毒鸡汤，净化心灵。但是，每次百度搜毒鸡汤体验感太差，于是，我手写了个鸡汤生成脚本。

百度不动了，喂自己几口鸡汤：

掘金看累了，喂自己几口鸡汤：

实现原理

谷歌浏览器安装油猴扩展插件

实现这样一个有趣的脚本实际非常简单，首先需要安装谷歌扩展插件-油猴（Tampermonkey）

如果你不了解什么是油猴，参考这篇文章。

在Chrome应用商店中，搜索 “篡改猴”、“油猴” 或 “Tampermonkey”等关键词，搜索出扩展应用后，点击「添加至Chrome」进行安装。

油猴（Tampermonkey）作为一款浏览器插件，允许用户在网页加载时注入自定义的 JavaScript 脚本，来增强、修改或自动化网页行为。

通俗地说，借助油猴，我们可以将自己的 JavaScript 代码“植入”任意网页，实现自动登录、抢单、签到、数据爬取、广告屏蔽等各种“开挂级”功能，彻底掌控页面行为。

油猴安装好后，点击油猴的添加新脚本

在代码模板中，我们就可以写入前端代码了。

“毒鸡汤”的跨域数据获取与渲染

毒鸡汤的文案数据来自一个开放接口：

https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json。

每次调用接口都会随机返回一句毒鸡汤，非常适合用作脚本中的内容来源。由于油猴脚本运行在任意网页上，直接发起请求时容易遇到跨域限制。为了解决这个问题，我们可以使用 Tampermonkey 提供的跨域请求 API —— GM_xmlhttpRequest。它可以绕过浏览器的同源策略，安全地获取第三方接口数据。

以下是一个“鸡汤来喽”的调用示例：

GM_xmlhttpRequest({
  method: 'GET',
  url: 'https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',
  onload: function (res) {
    try {
      const data = JSON.parse(res.responseText);
      textContent = `💀 ${data.text}`;
    } catch (e) {
      textContent = '💀 鸡汤炸了';
    }
  },
  onerror: function () {
    textContent = '💀 鸡汤没了';
  }
});