自媒体创作利器：借助油猴脚本助你轻松应对热门话题

大家好，我是安果！

对于做短视频自媒体的同学来说，在上传视频时需要指定多个热门话题，以此来增加短视频的流量

本篇文章将以抖音创作服务平台、快手创作者服务平台、视频号助手为例，讲解如何借用油猴编写一个插件，实现快速插入热门话题的功能

对油猴脚本不了解的同学可以看我之前写的一篇文章

5 分钟，教你从零快速编写一个油猴脚本！

1、准备

首先，在油猴的管理面板下新增一个脚本

然后，根据预设数据编辑脚本名称、版本号、描述、作者、图标icon、匹配网站、依赖及权限

匹配网站这里分别列出抖音、快手、视频号发布页面的匹配 URL 地址

// ==UserScript==
// @name         一键添加话题
// @namespace    http://www.baidu.com
// @version      1.0.0
// @description  快速添加话题（抖音、快手、视频号）
// @author       星安果
// @icon         data:image/png;base64,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
// @match        https://channels.weixin.qq.com/platform*
// @match        https://creator.douyin.com/creator-micro/content/*
// @match        https://cp.kuaishou.com/article/publish/video*
// @match        https://cp.kuaishou.com/article/edit/video*
// @require      https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
// @require      https://greasyfork.org/scripts/448541-dom-to-image-js/code/dom-to-imagejs.js?version=1074759
// @grant        GM_xmlhttpRequest
// @grant        unsafeWindow
// @grant        GM_setClipboard
// ==/UserScript==

接着，我们做初始化操作，往页面中添加一个按钮

PS：让按钮显示在页面右上区域

//初始化
function init() {
    let Container = document.createElement("div");
    Container.style.position = "fixed";
    Container.style.color = "red";
    Container.style.right = "5px"
    Container.style.top = "20%"; 
    Container.style["z-index"] = "999999";
    Container.innerHTML = `
        <div style="padding: 0px; border: 1px solid #aaa; border-radius: 21px; float: right; background: #fff; position: relative; ">
        <button id="inputTopic"
        style="padding: 6px;
        width: auto;
        height: auto;
        background-repeat:no-repeat;
        background-size:62px;
        border:0;
        background-color:transparent;
        background:red;
        border-radius:21px;
        color:#fff;
        font-size:10px;
        text-align:center;">标签话题</button>
        </div>`;
    document.body.appendChild(Container);
}

最后，针对该按钮设置点击事件，针对不同的域名做不同的处理

//获取元素，设置点击事件
var inputTopicElement = document.getElementById("inputTopic");
inputTopicElement.onclick = function () {
    let hostname = window.location.hostname
    // console.log(hostname);
    //视频号助手
    if (hostname === 'channels.weixin.qq.com') {
         weixin(wx_topics);
    } else if (hostname === 'creator.douyin.com') {
         douyin(topic);
   } else if (hostname === 'cp.kuaishou.com') {
         kuaishou(topic);
   }
}

2、抖音

打开抖音发布页面，我们对流程进行梳理

添加话题的步骤为：在输入框内输入关键字，最后在下拉选项中选择特定的话题

PS：下拉选项的数据是根据输入内容动态生成的

因此，我们只需要使用 dispatchEvent 触发一个 input 事件

然后等待下拉选项出现我们需要的话题时，模拟一次点击，这样就完成了一个话题的添加

//抖音(单个话题)
function douyin(topic) {
    const myDiv = document.getElementsByClassName("ace-line")[0];
    myDiv.innerText = "#" + topic;

    // 创建一个input事件
    const inputEvent = new Event("input", {
        bubbles: true,
        cancelable: true,
    });

    // 触发input事件
    myDiv.dispatchEvent(inputEvent);

    //等待元素出现
    var waitIntervalId = setInterval(() => {
        const spanElements = $('span[class^="tag-hash-view-name"]');
        if (spanElements.length > 0) {
            spanElements.each(function (index, element) {
                var content = $(element).text();
                if (content === topic) {
                    element.click();
                    clearInterval(waitIntervalId);
                }
            });
        }
    }, 100);
}

3、快手

打开快手发布页面，我们继续对流程进行梳理

PS：快手添加话题的步骤虽然和抖音一致，但是通过上面的代码添加的话题是无效的

快手添加话题的步骤是：需要先点击「 #话题 」按钮，然后手动触发一个 input 事件，接着将光标定位到最后、获取焦点后模拟键盘输入内容，最后在下拉选项中选择特定的话题

//快手（单个话题）
function kuaishou(topic) {
    var divElement = document.querySelector('div[contenteditable="true"]');

    //点击【#话题】按钮
    const spanContent = '#话题';
    const matchingElements = $('span:contains("' + spanContent + '")');
    matchingElements.get(0).click();

    // 创建一个input事件，并触发
    const inputEvent = new Event("input", {
        bubbles: true,
        cancelable: true,
    });
    divElement.dispatchEvent(inputEvent);

    // 将光标定位到最后
    moveCursorToEnd(divElement);
    //聚焦
    divElement.focus()

    //模拟键盘输入（废弃，但是chrome还能使用）
    document.execCommand('insertText', false, topic);

    //等待元素出现
    var waitIntervalId = setInterval(() => {
        const spanElements = $('span[class^="s94sHDtzRU4-"]');
        if (spanElements.length > 0) {
            spanElements.each(function (index, element) {
                var content = $(element).text();
                if (content === topic) {
                    element.click();
                    clearInterval(waitIntervalId);
                } 
            });
        }
    }, 100);
}

4、视频号

微信视频号添加话题可以完全自定义，没有话题提示

所以，我们只需要将话题以特定的格式输入到编辑框即可

//视频号
function weixin(topics) {
    const myDiv = document.getElementsByClassName("input-editor")[0];

    let result = "";
    topics.forEach(element => {
        result += " #" + element;
    });
    myDiv.innerText += result;

    // 创建一个input事件
    const inputEvent = new Event("input", {
        bubbles: true,
        cancelable: true,
    });

    // 触发input事件
    myDiv.dispatchEvent(inputEvent);
}

5、最后

编写完脚本后，默认脚本状态为启用。这样每次我们发布视频时，只需要点击一下右侧的按钮，就可以一键将预设的话题添加到输入框内

上面的内容是针对添加单个话题的场景；大家如果有添加多个话题的需求，可以自行进行扩展

如果你觉得文章还不错，请大家 点赞、分享、留言 下，因为这将是我持续输出更多优质文章的最强动力！

推荐阅读

5 分钟，教你从零快速编写一个油猴脚本！

Python 绝招：解锁小红书信息流的无限潜力！

反爬篇 | 手把手教你处理 JS 逆向之字体反爬（下）

休闲时光：最近上映的电影与爬虫世界，带您彻底放松！

END

好文和朋友一起看~