【原】自媒體創(chuàng)作利器：借助油猴腳本助你輕松應(yīng)對熱門話題

AirPython 2023-11-20 發(fā)布于重慶

展開全文

大家好，我是安果！

對于做短視頻自媒體的同學(xué)來說，在上傳視頻時(shí)需要指定多個(gè)熱門話題，以此來增加短視頻的流量

本篇文章將以抖音創(chuàng)作服務(wù)平臺、快手創(chuàng)作者服務(wù)平臺、視頻號助手為例，講解如何借用油猴編寫一個(gè)插件，實(shí)現(xiàn)快速插入熱門話題的功能

對油猴腳本不了解的同學(xué)可以看我之前寫的一篇文章

5 分鐘，教你從零快速編寫一個(gè)油猴腳本！

1、準(zhǔn)備

首先，在油猴的管理面板下新增一個(gè)腳本

然后，根據(jù)預(yù)設(shè)數(shù)據(jù)編輯腳本名稱、版本號、描述、作者、圖標(biāo)icon、匹配網(wǎng)站、依賴及權(quán)限

匹配網(wǎng)站這里分別列出抖音、快手、視頻號發(fā)布頁面的匹配 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==

接著，我們做初始化操作，往頁面中添加一個(gè)按鈕

PS：讓按鈕顯示在頁面右上區(qū)域

//初始化
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;">標(biāo)簽話題</button>
        </div>`;
    document.body.appendChild(Container);
}

最后，針對該按鈕設(shè)置點(diǎn)擊事件，針對不同的域名做不同的處理

//獲取元素，設(shè)置點(diǎn)擊事件
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、抖音

打開抖音發(fā)布頁面，我們對流程進(jìn)行梳理

添加話題的步驟為：在輸入框內(nèi)輸入關(guān)鍵字，最后在下拉選項(xiàng)中選擇特定的話題

PS：下拉選項(xiàng)的數(shù)據(jù)是根據(jù)輸入內(nèi)容動態(tài)生成的

因此，我們只需要使用 dispatchEvent 觸發(fā)一個(gè) input 事件

然后等待下拉選項(xiàng)出現(xiàn)我們需要的話題時(shí)，模擬一次點(diǎn)擊，這樣就完成了一個(gè)話題的添加

//抖音(單個(gè)話題)
function douyin(topic) {
    const myDiv = document.getElementsByClassName("ace-line")[0];
    myDiv.innerText = "#" + topic;

    // 創(chuàng)建一個(gè)input事件
    const inputEvent = new Event("input", {
        bubbles: true,
        cancelable: true,
    });

    // 觸發(fā)input事件
    myDiv.dispatchEvent(inputEvent);

    //等待元素出現(xiàn)
    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、快手

打開快手發(fā)布頁面，我們繼續(xù)對流程進(jìn)行梳理

PS：快手添加話題的步驟雖然和抖音一致，但是通過上面的代碼添加的話題是無效的

快手添加話題的步驟是：需要先點(diǎn)擊「 #話題」按鈕，然后手動觸發(fā)一個(gè) input 事件，接著將光標(biāo)定位到最后、獲取焦點(diǎn)后模擬鍵盤輸入內(nèi)容，最后在下拉選項(xiàng)中選擇特定的話題

//快手（單個(gè)話題）
function kuaishou(topic) {
    var divElement = document.querySelector('div[contenteditable="true"]');

    //點(diǎn)擊【#話題】按鈕
    const spanContent = '#話題';
    const matchingElements = $('span:contains("' + spanContent + '")');
    matchingElements.get(0).click();

    // 創(chuàng)建一個(gè)input事件，并觸發(fā)
    const inputEvent = new Event("input", {
        bubbles: true,
        cancelable: true,
    });
    divElement.dispatchEvent(inputEvent);

    // 將光標(biāo)定位到最后
    moveCursorToEnd(divElement);
    //聚焦
    divElement.focus()

    //模擬鍵盤輸入（廢棄，但是chrome還能使用）
    document.execCommand('insertText', false, topic);

    //等待元素出現(xiàn)
    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);
}