YouTube 用户脚本 (TamperMonkey) 更改搜索中的占位符
YouTube Userscript (TamperMonkey) to change the placeholder in Search
我正在用用户脚本为 TamperMonkey 编写一个主题 YouTube,我遇到的问题是更改字体颜色和搜索字段中占位符 "Search" 的内容。
在用户脚本中执行此操作的最佳方法是什么?
您可以使用 CSS 更改占位符的颜色。重要的是,@grant 的值是 GM_addStyle
而不是 none
.
然后你可以像下面的例子一样添加样式。
使用 document.querySelector('input#search').placeholder = 'new placeholder text';
您可以为占位符设置新文本。
@wOxxOm 感谢 youtube 活动的提示。
yt-navigate-start 事件提前了,但是有了 yt-navigate-finish 事件和 200 毫秒的延迟它就可以工作了。
// ==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);
});
})();
我正在用用户脚本为 TamperMonkey 编写一个主题 YouTube,我遇到的问题是更改字体颜色和搜索字段中占位符 "Search" 的内容。
在用户脚本中执行此操作的最佳方法是什么?
您可以使用 CSS 更改占位符的颜色。重要的是,@grant 的值是 GM_addStyle
而不是 none
.
然后你可以像下面的例子一样添加样式。
使用 document.querySelector('input#search').placeholder = 'new placeholder text';
您可以为占位符设置新文本。
@wOxxOm 感谢 youtube 活动的提示。 yt-navigate-start 事件提前了,但是有了 yt-navigate-finish 事件和 200 毫秒的延迟它就可以工作了。
// ==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);
});
})();