如何使用用户脚本更改指向特定文件扩展名的链接的颜色?
How to the change color of links to specific file extensions with a userscript?
我的学校网站有作业下载链接,我想用不同的颜色来区分它们。
例如:Microsoft Word 文件为蓝色,.RTF 文件为绿色。
由于我是这个 none 的新手,我的脚本正在运行。
我的脚本:
// ==UserScript==
// @name Homework Help
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Color links for different file extensions
// @author You
// @match (My School Website)
// @grant none
// ==/UserScript==
function getFileExtension(filename) {
return filename.split('.').pop();
}
(function() {
'use strict';
// Your code here...
var links = document.getElementByTagName("a");
var element;
for (var i = 0; i < links.lenth(); i++){
element = rtfs[i];
if( getFileExtension(element.href) == "rtf" ){
element.style.color = "green";
}
}
})();
我尝试用谷歌搜索但没有找到解决方案。
- 您学校的网站可能会使用 AJAX 加载文件列表。如果
在这种情况下,您需要使用 AJAX 感知技术。
- 此外,正如 wOxxOm 所指出的,代码中存在语法错误。
- 有时,根据网站的 CSS,您可能需要 use the
!important
flag。
以下完整脚本使用 jQuery 和 waitForKeyElements()
来解决项目 1 和 2(它也适用于静态页面):
// ==UserScript==
// @name _Color code links by file extension
// @match http://YOUR_SERVER.COM/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.
// PICK A MORE PRECISE SELECTOR IF YOU CAN.
waitForKeyElements ("a", colorLink);
function colorLink (jNode) {
var fileHref = jNode.attr ("href");
if ( ! fileHref) return; //-- Not every link has an href.
var fileExt = fileHref.split ('.').pop ().toLowerCase ();
switch (fileExt) {
case "rtf":
jNode.css ("color", "green");
break;
case "doc":
jNode.css ("color", "pink");
break;
default:
//-- No action needed.
break;
}
}
注意:jQuery 选择器 "a"
将过滤每个 link!但是我们需要页面详细信息来选择更有针对性的选择器。使用 this question 中显示的技术来缩小选择范围。
我的学校网站有作业下载链接,我想用不同的颜色来区分它们。
例如:Microsoft Word 文件为蓝色,.RTF 文件为绿色。
由于我是这个 none 的新手,我的脚本正在运行。
我的脚本:
// ==UserScript==
// @name Homework Help
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Color links for different file extensions
// @author You
// @match (My School Website)
// @grant none
// ==/UserScript==
function getFileExtension(filename) {
return filename.split('.').pop();
}
(function() {
'use strict';
// Your code here...
var links = document.getElementByTagName("a");
var element;
for (var i = 0; i < links.lenth(); i++){
element = rtfs[i];
if( getFileExtension(element.href) == "rtf" ){
element.style.color = "green";
}
}
})();
我尝试用谷歌搜索但没有找到解决方案。
- 您学校的网站可能会使用 AJAX 加载文件列表。如果 在这种情况下,您需要使用 AJAX 感知技术。
- 此外,正如 wOxxOm 所指出的,代码中存在语法错误。
- 有时,根据网站的 CSS,您可能需要 use the
!important
flag。
以下完整脚本使用 jQuery 和 waitForKeyElements()
来解决项目 1 和 2(它也适用于静态页面):
// ==UserScript==
// @name _Color code links by file extension
// @match http://YOUR_SERVER.COM/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.
// PICK A MORE PRECISE SELECTOR IF YOU CAN.
waitForKeyElements ("a", colorLink);
function colorLink (jNode) {
var fileHref = jNode.attr ("href");
if ( ! fileHref) return; //-- Not every link has an href.
var fileExt = fileHref.split ('.').pop ().toLowerCase ();
switch (fileExt) {
case "rtf":
jNode.css ("color", "green");
break;
case "doc":
jNode.css ("color", "pink");
break;
default:
//-- No action needed.
break;
}
}
注意:jQuery 选择器 "a"
将过滤每个 link!但是我们需要页面详细信息来选择更有针对性的选择器。使用 this question 中显示的技术来缩小选择范围。