如何不跳转页面点击元素？Instagram批量取消关注插件开发求助

一、无需跳转的弹窗实现思路 #

Instagram主页的「following」按钮点击后，是通过AJAX加载关注列表弹窗，无需跳转新页面。可以通过以下步骤实现双击触发批量取消：

1. 监听主页following按钮的双击事件
2. 模拟点击打开关注列表弹窗
3. 等待弹窗加载后批量执行取消操作

示例代码：

document.addEventListener('DOMContentLoaded', () => {
  // 定位主页的following按钮（根据当前Instagram页面结构调整选择器）
  const followingBtn = document.querySelector('a[href="/_chaeboll/following/"]');
  if (!followingBtn) return;

  followingBtn.addEventListener('dblclick', async () => {
    // 打开关注列表弹窗
    followingBtn.click();
    // 等待弹窗加载（可根据网络情况调整延迟时间）
    await new Promise(resolve => setTimeout(resolve, 2000));

    // 获取弹窗内的取消关注按钮（类名需用F12开发者工具实时确认，Instagram会不定期更新）
    let unfollowBtns = document.querySelectorAll('button._acan._acao._acas');
    
    // 批量执行取消，加入延迟避免触发反限制机制
    for (const btn of unfollowBtns) {
      btn.click();
      await new Promise(resolve => setTimeout(resolve, 500));
      // 点击确认取消的按钮
      const confirmBtn = document.querySelector('button._a9--._a9-_');
      confirmBtn?.click();
      // 每次操作间隔，降低风控概率
      await new Promise(resolve => setTimeout(resolve, 1500));
    }
  });
});

二、后台跳转执行方案（Chrome扩展跨页面联动） #

如果偏好跳转至following页面执行操作，可通过扩展的background脚本配合content script实现：

1. manifest.json配置权限与脚本匹配

{
  "manifest_version": 3,
  "permissions": ["tabs", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://www.instagram.com/_chaeboll/", "https://www.instagram.com/_chaeboll/following/"],
      "js": ["content.js"]
    }
  ]
}

2. content.js监听主页双击事件，发送消息给background

document.addEventListener('DOMContentLoaded', () => {
  const followingBtn = document.querySelector('a[href="/_chaeboll/following/"]');
  if (!followingBtn) return;

  followingBtn.addEventListener('dblclick', () => {
    chrome.runtime.sendMessage({action: "openFollowingPage"});
  });
});

3. background.js接收消息，打开页面并注入执行脚本

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action !== "openFollowingPage") return;

  chrome.tabs.create({url: "https://www.instagram.com/_chaeboll/following/"}, (tab) => {
    const listener = (tabId, info) => {
      if (tabId === tab.id && info.status === 'complete') {
        chrome.tabs.executeScript(tabId, {
          code: `
            async function batchUnfollow() {
              let unfollowBtns = document.querySelectorAll('button._acan._acao._acas');
              for (const btn of unfollowBtns) {
                btn.click();
                await new Promise(resolve => setTimeout(resolve, 500));
                const confirmBtn = document.querySelector('button._a9--._a9-_');
                confirmBtn?.click();
                await new Promise(resolve => setTimeout(resolve, 1500));
              }
            }
            batchUnfollow();
          `
        });
        chrome.tabs.onUpdated.removeListener(listener);
      }
    };
    chrome.tabs.onUpdated.addListener(listener);
  });
});

三、自动化操作与反混淆学习资源 #

自动化操作方向 #

• Chrome扩展官方文档：重点学习content script、background script的通信逻辑，以及tabs权限的使用场景
• 浏览器开发者工具教程：熟练用Elements面板定位元素选择器，Network面板分析AJAX请求，Console面板调试代码
• 异步JavaScript教程：掌握Promise、async/await的使用，用于控制批量操作的延迟节奏

反混淆学习方向 #

• JavaScript逆向入门教程：从变量名混淆、字符串加密等基础手法入手，理解常见混淆套路
• 浏览器调试进阶：学习用Sources面板断点调试混淆代码，逐步还原逻辑流程
• 常见混淆工具分析：了解UglifyJS、Terser等工具的混淆规则，针对性拆解混淆代码

内容的提问来源于stack exchange，提问作者Wang Chaeboll