我如何獲得Greasemonkey突出顯示訪問的圖像鏈接？

我使用的網站顯示各種圖像鏈接，但沒有給出我已經訪問過哪些鏈接的視覺指示器。我如何獲得Greasemonkey突出顯示訪問的圖像鏈接？

Greasemonkey如何調整鏈接，以便我一眼就能看到我訪問過哪些鏈接？

例如，給出鏈接，如：

<a href="/056"> <img src="pic_A.png"> </a> 
<a href="/138"> <img src="pic_1.png"> </a> 
<a href="/144"> <img src="pic_B.png"> </a> 
<a href="/150"> <img src="pic_2.png"> </a> 
<a href="/153"> <img src="pic_C.png"> </a> 
<!-- etc. -->

的Greasemonkey可以指示已被訪問哪些？

來源

2015-12-16 JohnRU

的Greasemonkey可以通過使用GM_addStyle()款式a:visited img環節做到這一點。

但有一點需要注意：
:visited CSS will only accept color rules.這是出於安全原因;看到前面的鏈接。

這裏有一個辦法：

添加邊框，所有相關的圖片鏈接。
然後:visited CSS可以用來改變訪問鏈接的邊框顏色。
重要說明： :visited不能用於添加尚不存在的邊框。
這確實概括了所有圖像，但目前沒有其他方法。 JavaScript無法檢測到訪問的鏈接;只有CSS可以。（這是安全的改變整點。）

一個完整的Greasemonkey/Tampermonkey腳本時，這樣做，是這樣的：

// ==UserScript== 
// @name  Stylize visited image links 
// @include https://fiddle.jshell.net/BrockA/40dc7m31/* 
// @grant GM_addStyle 
// ==/UserScript== 
GM_addStyle ("         \ 
    a img {          \ 
     border: 5px solid blue !important;  \ 
     background: lightblue !important;  \ 
    }           \ 
    a:visited img {        \ 
     border: 5px solid purple !important; \ 
     background: purple !important;   \ 
    }           \ 
");

您可以測試它this handy jsFiddle page.

沒有腳本，圖像鏈接看起來像這樣：
的腳本後，訪問過的鏈接是紫色概述：

注：

的Stylish add-on也可以使這隻改變一些CSS。
相關問題：How can I detect visited and unvisited links on a page?

來源

2015-12-16 05:53:19

這個作品，謝謝。我認爲沒有辦法做到這一點，而不會影響未訪問鏈接的CSS（我嘗試用透明替換你的藍色，但是打破了其他規則）？ – JohnRU

正確。 '：visited'不能改變邊框的厚度，透明度或存在性。但是，您可以*將未訪問鏈接的邊框顏色設置爲與背景相同的顏色，對於許多頁面，則爲EG白色。 –

這就是CSS中的a:visited。

a:visited { 
    text-decoration: underline; 
    color: #09d; 
}

在<a>標籤內的圖像例如，您可以做到這一點的情況下：

a:visited { 
    border: 1px dotted green; 
}

來源

2015-12-16 01:07:56 Johannes

我很抱歉，但似乎並沒有工作。文字修飾和顏色僅適用於文字，而不適用於圖像，並且邊框選項似乎不適用於安全原因 – JohnRU

安全原因？我懷疑，一個邊界不會有任何傷害......但是你可能會嘗試添加'！important'，就像這樣：'a：visited {border：1px dotted green！important; }' – Johannes

oopps，我剛剛看到'greasemonkey'標籤。所以你不是自己寫代碼，我想。我不得不承認我不知道Greasemonkey，上面的答案是隨着改變原始代碼而給出的... – Johannes

我如何獲得Greasemonkey突出顯示訪問的圖像鏈接？

回答

相關問題