自动签到神器：掘金签到助手插件开发全攻略

前端

2023-09-06 18:37:30

前言

掘金作为技术人员聚集交流的平台，签到是获取积分和提升等级的重要途径。然而，对于工作繁忙的朋友来说，每日签到难免会忘记。为解决这一痛点，本文将手把手教你开发一款Chrome插件——掘金签到助手，自动完成签到任务，解放你的双手。

插件开发准备

1.安装Chrome插件开发环境

安装Visual Studio Code（简称VSCode）文本编辑器
安装Chrome浏览器并启用开发者模式
安装Chrome扩展管理工具（Extension Manager）

2.创建Chrome插件项目

打开VSCode，新建一个项目文件夹
在项目文件夹中，右键单击并选择“新建”->“项目”
在弹出的窗口中，选择“Chrome扩展”模板
填写插件名称和，单击“创建”按钮

开发掘金签到助手

1.编写后台脚本

在项目文件夹中创建background.js文件，并添加以下代码：

chrome.runtime.onInstalled.addListener(() => {
  console.log("掘金签到助手插件已安装！");
});

chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tabId = tabs[0].id;
    chrome.tabs.executeScript(tabId, { file: "content.js" });
  });
});

这段代码负责监听插件安装事件和插件图标点击事件，并触发签到操作。

2.编写内容脚本

在项目文件夹中创建content.js文件，并添加以下代码：

(function () {
  function autoSign() {
    const signButton = document.querySelector(".global-nav-item.btn.btn-primary");
    if (signButton) {
      signButton.click();
    } else {
      console.log("今日已签到或其他异常情况！");
    }
  }

  autoSign();
})();

这段代码负责自动查找并点击掘金的签到按钮，实现签到操作。

3.配置清单文件

在项目文件夹中打开manifest.json文件，并添加以下配置：

{
  "name": "掘金签到助手",
  "version": "1.0.0",
  "description": "一键自动签到掘金",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["https://juejin.cn/*"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_title": "掘金签到助手",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "activeTab"]
}