简单3步开发自动点击网页的浏览器插件

某视频网站页面上有多个视频，必须一个个点击才能播放，本文介绍如何使用浏览器插件实现自动点击播放。

浏览器插件是扩展浏览器功能的软件组件，它们允许浏览器执行原生代码或者处理特定类型的内容。

1.插件开发

创建一个新的文件夹来存放插件文件。在这个文件夹中，创建以下文件：

manifest.json - 这是Chrome扩展的配置文件，用来定义扩展的基本信息和权限等。

{
    "manifest_version": 3,
    "name": "自动播放视频插件",
    "version": "1.0",
    "description": "自动播放网页视频",
    "permissions": [
      "activeTab",
      "scripting"
    ],
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }

content.js - 这个JavaScript文件用来注入特定的脚本到网页中。定时检查页面和嵌套的iframe中是否存在指定的按钮，并自动点击它。

(function() {
    function clickButtonInDocument(doc, selector, buttonDescription, clickIfFound) {
        const result = doc.querySelector(selector);
        if (result) {
            if (clickIfFound) {
                result.click();
                console.log(`${buttonDescription}按钮已在${doc === document ? "主文档" : "iframe"}中点击`);
            } else {
                console.log(`${buttonDescription}按钮已在${doc === document ? "主文档" : "iframe"}中找到，未点击`);
            }
            return true;
        }
        return false;
    }

    function findAndClickButton(doc, selector, buttonDescription, clickIfFound = true) {
        if (clickButtonInDocument(doc, selector, buttonDescription, clickIfFound)) {
            return true;
        }

        const iframes = doc.querySelectorAll('iframe');
        for (let iframe of iframes) {
            if (findAndClickButton(iframe.contentDocument || iframe.contentWindow.document, selector, buttonDescription, clickIfFound)) {
                return true;
            }
        }
        return false;
    }

    function findButtonByCSSSelector(selector, buttonDescription, clickIfFound = true) {
        try {
            if (!findAndClickButton(document, selector, buttonDescription, clickIfFound)) {
                console.log(`${buttonDescription}按钮未找到`);
            }
        } catch (error) {
            console.error('CSS选择器查找失败: ', error);
        }
    }

    function handleClickLogic() {
        findButtonByCSSSelector('button[title="播放视频"]', '播放视频');
    }

    setInterval(handleClickLogic, 3000);
    console.log("自动化脚本已启动，每3秒检查一次...");
})();

• clickButtonInDocument 函数：在给定的document对象中查找并点击按钮。
• findAndClickButton 函数：这个递归函数用于处理包括嵌套iframe的情况。它使用了上面定义的clickButtonInDocument来尽量减少重复代码。

2.适配多种网页

为了让自动点击插件能够适配其他网页，涉及到获取对应页面元素的CSS选择器，并根据实际页面结构进行适当的修改或替换。

1. 打开目标网页。
2. 右键点击需要点击的元素，并选择“检查”（Inspect）或“审查元素”（Inspect Element）打开开发者工具的Elements面板。
3. 在Elements面板中，右键点击高亮显示的代码行，选择“Copy” > “Copy selector”获取该元素的CSS选择器。
4. 替换代码里的findButtonByCSSSelector('button[title="播放视频"]', '播放视频');中的'button[title="播放视频"]'即可

3.插件安装

• 输入 chrome://extensions/ 在地址栏中并回车。
• 开启右上角的“开发者模式”。
• 点击“加载已解压的扩展程序”按钮，选择你的插件文件夹。安装成功如下所示。

插件安装成功后，打开任意网站页面，然后打开开发者模式控制台（按F12）打开，然后点击打开的网页可以看到控制台输出的日志。该页面的所有视频列表可以自动点击依次播放。