YouTube用户脚本(TamperMonkey)更改搜索中的占位符 [英] YouTube Userscript (TamperMonkey) to change the placeholder in Search

问题描述

我正在用用户脚本为TamperMonkey编写一个主题以YouTube为主题，我遇到的问题是更改字体颜色&搜索字段中占位符搜索"的内容.

I'm writing a theme in userscript for TamperMonkey to theme YouTube, the problem i'm having is with changing the font color & the content of the placeholder "Search" in the search field.

在用户脚本中执行此操作的最佳方法是什么?

What's the best way to do this in userscript?

推荐答案

您可以使用CSS更改占位符的颜色.重要的是，@ grant中的值是GM_addStyle而不是none.

You can change the color of the placeholder with CSS. Important is, that the value from @grant is GM_addStyle and not none.

然后，您可以像下面的示例一样添加样式.

Then you can add the styles like in the bottom example.

使用document.querySelector('input#search').placeholder = 'new placeholder text';，您可以为占位符设置一个新文本.

With document.querySelector('input#search').placeholder = 'new placeholder text'; you can set a new text for the placeholder.

@wOxxOm thx，以获取有关youtube事件的提示. yt-navigate-start事件为早，但是yt-navigate-finish事件和200ms的延迟才有效.

@wOxxOm thx for the hint with the youtube event. yt-navigate-start event is to early, but with the yt-navigate-finish event and a 200ms delay it works.

// ==UserScript==
// @name         YouTube Search
// @namespace     https://www.youtube.com
// @include     https://www.youtube.com/*
// @run-at document-end
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle(`
::placeholder {
color: red;
opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
`);

(function() {
    'use strict';

    document.querySelector('input#search').placeholder = 'new placeholder text';

    document.addEventListener('yt-navigate-finish', () => {
        setTimeout(() => {
            document.querySelector('input#search').placeholder = 'new placeholder text';
        },200);
    });
})();

这篇关于YouTube用户脚本(TamperMonkey)更改搜索中的占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！