大家好，我是安果！
对于做短视频自媒体的同学来说，在上传视频时需要指定多个热门话题，以此来增加短视频的流量
本篇文章将以抖音创作服务平台、快手创作者服务平台、视频号助手为例，讲解如何借用油猴编写一个插件，实现快速插入热门话题的功能
1、准备
首先，在油猴的管理面板下新增一个脚本
然后，根据预设数据编辑脚本名称、版本号、描述、作者、图标icon、匹配网站、依赖及权限
匹配网站这里分别列出抖音、快手、视频号发布页面的匹配 URL 地址
代码语言：javascript复制// ==UserScript==
// @name 一键添加话题
// @namespace http://www.baidu.com
// @version 1.0.0
// @description 快速添加话题（抖音、快手、视频号）
// @author 星安果
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAADPNJREFUeF7tnfF13DYMxnkeoe0KniPOOGmHSDxE2nHqzOEV2oxw6uPZdGVZFEGIoD6I3/2T93KkSHzAjwApnXwJ/FABKpBV4EJtqAAVyCtAQBgdVGBDAQLC8KACBIQxQAV0CjCD6HRjr0EUICCDOJpm6hQgIDrd2GsQBQjIII6mmToFCIhON/YaRAECMoijaaZOAQKi0429BlGAgAziaJqpU4CA6HRjr0EUICCDOJpm6hQgIDrd2GsQBQjIII6mmToFCIhON/YaRAECMoijaaZOAQKi0429BlGAgAziaJqpU4CA6HRjr0EUICCDOJpm6hQgIDrd2GsQBQjIII6mmToFCIhON/YaRAECMoijaaZOAQKi0429BlGAgAziaJqpU4CA6HRjr0EUICCDOJpm6hQgIDrd2GsQBQjIII6mmToFCIhON/YaRAECMoijaaZOAQKi0429BlGAgAziaJqpU8AFIL/99fxwvYaHaOLdXXiK//7z5f72Lz8 FIg TDONvox 9OBDF4D88ufzlA2DKTzG737 cf/NR6icf5YJhimEr9HaaXpZ3OafyyU8/fvl/jO6GvCA/PL9 Vu4vAgt kzh0cvqJLLHSaMIxRYQq2ZM4RF9YcMHZCt7bARPXKGma/iB7gAn8Z dZgJjLUtIbPv5 z10DEJPrjp75DziYKWSBBNSm1F8gw2IMnts7VeYUfZh1gyM12mg70VgAWntiHdhwYxSTYmlP 4u4TPqidaYgKTwIChFUPbuMYoDhBCQswguIK3LK 5PJLH6rs2vfz3/rd181w6GmkUgAbFM59yflEP3dmN2Cn XW7ZrQUAqtOy5cnFv8t4xhyxOwGUWZgbpVV6tQBvr4UsIj6ibxop1pqppj71GaUKIWQQOkKNWsA/OG2gDj6I5ASktISEEFGfdpjoAJEh6I55m4WWQA8urNX4RnSZYZ0RNDtvrbcwO7dETKECOOD0RRVJ8zB74ZpbUhtSOOssVgwIEKd2vSniCkgsZjqg52kJEQOSLyUtLx5DAL0CAx71QgCDWxGfJJB7giFqj7fmgANn85WDtSm/d3lEm8QJHchnSRp2A7AHJASTe4EDbh8AAgr55zHIEDIlHOAhIJtK8OhN14 5ZT6STLJgM4tmhaJBQyz118/u BKSdlhBHwO7hADtKJyAtATnYuaeAA yoFwYQN/dAJEAdsHE/Cxxo90IIiCTgNW06QnImOAhIJthOlUFebexxGnM2OAjIQIBIz/TnL3aey1P6VaPbe0eFjIz0uAlLLE35VNknOnzeRfumkPl14mtVq95ZXDnnI5sTkBX1z1hiHRlkrsfuuH8r6QSTQc5YS5fE5/cZBQjIR2EICHF5U4CAEBDisKEAAfkozllPZAiCQgECQkAUYTNMlx73j6RiwmzS44Rd/aJQqjDbVSvAXxRmJCMg1bF0yg4EJONW3gs5ZbxXGYV0kzBOHKrEIiBVsXTOxkAbdDhAeJJ1zpivsoqA5OUiIFWhdMrGSPsPuAwSJ8Qy65RxLzaKgBSkIiDiWDpfQ7DyCjKDsMw6X9yLLSIgZakISFmjs7ZAK68gMwj3IWcN/2270O5/pNlC3QdJk2IWGRASwPIKNoMQkPEAQSyvYAFhmTUWIKjlFTQgzCIDQQJaXhGQgWIQ2VTU8goaEJZZyCHdcG7A2QMeEJQyq9V7rRqGlepSkHYQEJUv3zod ujJhvNcvYUF1A7kzTn0fZA5UkdkkRrHHQpwYe2BtwM8e8CXWMn/PYOwJqiOmJ80H3uwA3lz7iaDxIn2/K261mk95yiBBN0ODcASu1u3gXzUZG5k11p/R8rvOs9SFHixY8c8SxK0 h4akN5Bp111kzNQsognO5DegbUGFTYgfz5PrVaC0nVapPyee6WcPd7saDHfkm/3fA8LSO/s0cJRBEQZisClFiQg6Ee7uTAgIEpAQgiopRYkIL2zx 28 xKe/v1y/1nvYowXTni1o8W89/guW7JaXHTPNY AI83X0 Z2S2OvdiBmEbgMcuhJ0I5a EiwP8Di1A7ELAIFCEKQaVffQ8FeSSde7UDLIgRkEVyaVQxhc75kxKsdmnnvKelLfbEA6XjfY0uYGichwpFs82oHUhaBAQShvKqp5SHnm6Me9HH33HQJyIoy6CvxfMrTFB5KqRnxe8gfTK0IVZP5rHXGySAg5ZW14Ly TAHtIYPs6vJWEIAccedcLhFbHqEASplFQI7wPscsKkBAZhK52vAWXcsGTRTYcbOzyfivF4HIIASkpUvPcS2UjXo3QOI I7rueg0Pl7vwKbnR64nQOcLQhxURlukafsTZ3t2Fp3 3D/1mnlzQNZAIAS93DnWOOnY2hKeJoCwRJIH5vJehLznS0suNjLFWm3yCYhM72at9joO7aHIZsK0vlCjTX4TQHgfQ 7dPZtPZmq5znsXojRSE0Dixbiy2TuPGss1bnUnvhkgyM9SyWXt01KTRZg95L7R6Ju7OgGR6960ZW0JwOxRIX j/UccsRkgNfuQ UnOJYTHeG8kXMLXCgncN61Z5YbMHlN4fNsH3IVPVad3XgCZn1PHGzzR4NxNnhFXSGkWGVGb3B5ifp/ttsKvwCPVVbLKNssgcbA0ec2dzhH3MJIsMmT2CCFoNtm3KuYaHn7 cf9NEvySNk0BkQyYa4MCyFrQWq7gpdXOcuxlEKL4IDQskfbEZNM9yN6JIK2Uy8CxDNKtLGKtSU87q KDgHyUq2aTXyW2onHvlTWXRXqDaTlejRtKWbXmWnvbssRaUXDpIPPSY2XFNF8wFmOaj1cTqcwg/6tlXUbU CW1XQJiHTy5DaklmEsbEf2AsBc5LIPEoJtC Fp1vq2JdkWftX2BWbBurJZmYK6MaWafQv95l/RbkJYnUzVTOgQQVGfMheuVRUrHmSZarQCCsv/IBu9BZVdXQCDTeMYjq8e935 /tbzjL9mMNs8ia3A0tqtmha5u2xmULoAgl1NbDloL4GYremZjHuezvNHaDJJMcMFnj4WTepZd5oA0C6jqpWZ/h9w9it2ZMBOoUas467U/5GM15u7r7pdZf4UO2cQMENfCz12WW3UVZUkELj6cufYozlyvljcPpWPqoxSgpyEodoAoXyWaHHqdwm01hfgUXv689sDc8iQmB0Zst7qYlF44HTtuPAFdKkPQFrBYzu55qrt02KGNIztAFCvsvOZvVndrlVn2E6xS6WG52LX09HK6/GagCsZ8A z1gpJx0eCY3 9QzU2okyYUzACJk5HuP3IlhbS/xnBVn4aOkB5cSJ74rbHFi6Y1oFhlj5ckbfgpZYGt jhOq9TfcOrbl94JisquI8bsIPDWUXeEpFS Wt9tNwVkM4sIHV6zknTw5/shhDYk2Js8OTCFR nbBdPvc5qMayGuUL tGLDMHuYZZC0LlLLGmh9cnNPPfiIaA7jHK1bnr R8dyjw mpXxMd45vOsDe4PoAgB28O2eQZJWeSVxtUjzpIBqpKkdFF f6wCyuBOkLTem XE6AJIC09Al1otDBzpGko45hLFRVPz0 5amd0AsrmfqbWa7Q9ToNfK38pAV4AQklZuP Y63uDosklv7QruR1or2u96tZvyfjPLj Qug6ydjCEIyTlsKyB5tB9RQ5eAEBLEUNqYU4NN VEWuwUkCsaTraPCpmJcx3C43IMsXcM9SUWwdmyquSHccXrioVxnkLmVzCZin5s39HhalRPlNICw5DKPe9kAzkuqpZGnAoSQyGLYqpXXk6otPU4HSDrhgn2C1So6D7zuWfYbaxKeEpBkKPcl9tScMWvMVTs1IATFEJCT7TWG2KSXwoEZpaRQ fszl1PDlVhrBt8giZ/B/iZiOfS3W4wGRlJjiBKLoOjxGBWM4QGZh4zo5QD6GHPXc3QohtukSyP07b1Wg5ZfBONjpAxbYpWgGWGvkv5M99ZbH0s6nf17AiL08FmASVkimt3jN91CeWGbERCFa avGEU DZtnCAKhcLT1mxV1U/LZK72k7fYC5ijsXfjU471UCYI45nQNPyTv5vWp8DGzZgbpoHuCJw2VIFoOHaFKgb78LgX /P9ZItk7j4DYa8wRHCtAQBw7j1O3V4CA2GvMERwrQEAcO49Tt1eAgNhrzBEcK0BAHDuPU7dXgIDYa8wRHCtAQBw7j1O3V4CA2GvMERwrQEAcO49Tt1eAgNhrzBEcK0BAHDuPU7dXgIDYa8wRHCtAQBw7j1O3V4CA2GvMERwrQEAcO49Tt1eAgNhrzBEcK0BAHDuPU7dXgIDYa8wRHCtAQBw7j1O3V4CA2GvMERwrQEAcO49Tt1eAgNhrzBEcK0BAHDuPU7dXgIDYa8wRHCtAQBw7j1O3V4CA2GvMERwrQEAcO49Tt1eAgNhrzBEcK0BAHDuPU7dXgIDYa8wRHCtAQBw7j1O3V4CA2GvMERwr8B8sf Uje2p3yQAAAABJRU5ErkJggg==
// @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：让按钮显示在页面右上区域
代码语言：javascript复制//初始化
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);
}
最后，针对该按钮设置点击事件，针对不同的域名做不同的处理
代码语言：javascript复制//获取元素，设置点击事件
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 事件
然后等待下拉选项出现我们需要的话题时，模拟一次点击，这样就完成了一个话题的添加
代码语言：javascript复制//抖音(单个话题)
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 事件，接着将光标定位到最后、获取焦点后模拟键盘输入内容，最后在下拉选项中选择特定的话题
代码语言：javascript复制//快手（单个话题）
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、视频号
微信视频号添加话题可以完全自定义，没有话题提示
所以，我们只需要将话题以特定的格式输入到编辑框即可
代码语言：javascript复制//视频号
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、最后
编写完脚本后，默认脚本状态为启用。这样每次我们发布视频时，只需要点击一下右侧的按钮，就可以一键将预设的话题添加到输入框内
上面的内容是针对添加单个话题的场景；大家如果有添加多个话题的需求，可以自行进行扩展
如果你觉得文章还不错，请大家 点赞、分享、留言 下，因为这将是我持续输出更多优质文章的最强动力！
