如何做一款掘金一键三连插件 | 跟着大厂程序员步骤一步步解锁

开发工具

2023-10-19 09:59:11

掘金一键三连插件：简化操作，点赞、评论、收藏一步到位

简介

掘金作为国内领先的技术社区，吸引着众多技术爱好者。在掘金上，点赞、评论和收藏是用户表达对文章认可和支持的常见方式。然而，逐个点击这些按钮难免有些繁琐。为了解决这一痛点，本文将介绍一款掘金一键三连插件的开发过程和使用方法。

一、实现步骤

1. 创建谷歌扩展程序项目

打开谷歌扩展程序开发环境，选择新建项目，选择“扩展程序”。

2. 配置清单文件

配置插件名称、版本号、权限等基本信息。示例代码：

{
  "name": "掘金一键三连",
  "version": "1.0.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "掘金一键三连"
  },
  "permissions": [
    "activeTab"
  ]
}

3. 编写脚本文件

监听浏览器动作，获取当前标签页 URL，判断是否为掘金网站，然后发送消息给 content_script.js。示例代码：

chrome.browserAction.onClicked.addListener(function(tab) {
  var url = tab.url;
  if (url.indexOf("juejin.cn") < 0) {
    return;
  }
  chrome.tabs.sendMessage(tab.id, {
    action: "一键三连"
  });
});

4. 编写内容脚本文件

监听来自 background.js 的消息，获取点赞、评论和收藏按钮的元素，然后模拟点击这些按钮。示例代码：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "一键三连") {
    var likeButton = document.querySelector(".button-like");
    var commentButton = document.querySelector(".button-comment");
    var collectButton = document.querySelector(".button-collect");
    likeButton.click();
    commentButton.click();
    collectButton.click();
    sendResponse({
      status: "success"
    });
  }
});