给知乎添加历史记录
// ==UserScript==
// @name 知乎历史记录
// @namespace http://zhangmaimai.com
// @version 0.6
// @description 给知乎添加历史记录
// @author MaxChang3
// @match https://www.zhihu.com/
// @icon https://static.zhihu.com/heifetz/favicon.ico
// @grant none
// @run-at document-end
// @license WTFPL
// ==/UserScript==
/** 历史记录限制 */
const HISTORYS_LIMIT = 20
/** 自定义组件 - 弹出层 */
class ZHHDialog extends HTMLElement {
/** @type {HTMLDialogElement} */
dialog
/** @type {HTMLUListElement} */
historyList
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
const style = document.createElement('style')
style.textContent = `
dialog {
padding: 0;
border: 0;
}
dialog::backdrop {
background-color: hsla(0,0%,7%,.65);
}
.inner {
padding: 0 25px;
}
.inner:focus{
outline: none;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style: none;
padding-left: 0;
}
li {
padding-bottom: 10px;
}
.zhh-type-answer::before {
content: '问题';
color: #2196F3;
background-color: #2196F333;
font-weight: bold;
font-size: 13px;
padding: 1px 4px 0;
border-radius: 2px;
display: inline-block;
vertical-align: 1.5px;
margin: 0 4px 0 0;
}
.zhh-type-article::before {
content: '文章';
color: #004b87;
background-color: #2196F333;
font-weight: bold;
font-size: 13px;
padding: 1px 4px 0;
border-radius: 2px;
display: inline-block;
vertical-align: 1.5px;
margin: 0 4px 0 0;
}`
const dialog = document.createElement('dialog')
dialog.innerHTML = `<div class="inner" tabindex="0"></div>`
// 点击弹出层周围直接关闭
dialog.addEventListener('click', (e => {
if (!e.target.closest('div')) e.target.close()
}))
const inner = document.createElement('div')
inner.setAttribute('class', 'inner')
inner.setAttribute('tabindex', '0')
const historyList = document.createElement('ul')
historyList.setAttribute('id', 'zzh-list')
historyList.innerHTML = `<slot/>`
this.dialog = dialog
this.historyList = historyList
dialog.appendChild(inner)
inner.appendChild(historyList)
shadow.appendChild(dialog)
shadow.appendChild(style)
}
showModal() {
this.dialog.showModal()
}
}
customElements.define('zh-dialog', ZHHDialog)
/** 自定义组件 - 历史记录卡片 */
class ZHHistoryCard extends HTMLElement {
/** @type {HTMLElement} */
button
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
const style = document.createElement('style')
style.textContent = `
.Card {
background: #fff;
border-radius: 2px;
-webkit-box-shadow: 0 1px 3px hsl(0deg 0% 7% / 10%);
box-shadow: 0 1px 3px hsl(0deg 0% 7% / 10%);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 10px;
overflow: hidden;
padding: 5px 0;
}
.zhh-button {
box-sizing: border-box;
margin: 0px 18px;
min-width: 0px;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
display: flex;
border: 1px solid rgba(5, 109, 232, 0.5);
color: rgb(5, 109, 232);
border-radius: 4px;
cursor: pointer;
height: 40px;
font-size: 14px;
}
`
const wrapper = document.createElement('div')
wrapper.setAttribute('class', 'Card')
const button = document.createElement('div')
button.setAttribute('class', 'zhh-button')
button.innerText = '查看历史记录'
wrapper.append(button)
this.button = button
shadow.appendChild(wrapper)
shadow.appendChild(style)
}
}
customElements.define('zh-history-card', ZHHistoryCard)
/**
* 定义一下后面用到的属性类型
* @typedef {{
* authorName: string,
* itemId: number,
* title: string,
* type: 'answter' | 'article',
* url?: string
* }} ZHContentData
*/
/** 给元素绑定添加历史记录的事件
* @param {Event} e Event
*/
const bindHistoryEvent = (e) => {
/** @type {HTMLElement | undefined} */
const ansterItem = e.target.closest('.ContentItem')
if (!ansterItem) return
const zop = ansterItem.dataset.zop
if (!zop) console.error('无法读取回答或文章信息')
/** @type {ZHContentData} */
const contentData = JSON.parse(zop)
/** @type {string} */
const url = ansterItem.querySelector('.ContentItem-title a').href
contentData.url = url
const historysData = window.localStorage.getItem('ZH_HISTORY')
/** @type {ZHContentData[]} */
const histroys = historysData ?
JSON.parse(historysData)
.filter(histroy => histroy.itemId != contentData.itemId)
.concat(contentData) :
[contentData]
if (histroys.length > HISTORYS_LIMIT) histroys.shift()
window.localStorage.setItem('ZH_HISTORY', JSON.stringify(histroys))
HISTORYS_CACHE.CNT++
}
/** 从 localStorage 中取回历史记录 @returns {ZHContentData[]} */
const getHistoryList = () => JSON.parse(window.localStorage.getItem('ZH_HISTORY'))
/** 缓存数组 */
const HISTORYS_CACHE = { VALUE: '', CNT: 0, LAST_CNT: -1 }
/** 获取历史记录元素 */
const getHistoryListElements = () => {
// 做了个简单的缓存机制，如果距离上次点开前进行了若干次点击动作，则重新取回数据
// 否则就从直接缓存中拿回来
if (HISTORYS_CACHE.LAST_CNT === HISTORYS_CACHE.CNT) return HISTORYS_CACHE.VALUE
const type2Class = { answer: 'zhh-type-answer', article: 'zhh-type-article' }
/** @type {string} */
const ret = getHistoryList().map(({ title, url, authorName, type }) =>
`<li>
<a class="${type2Class[type]}" href="${url}">${title}</a> - ${authorName}
</li>`)
.reverse()
.join('\n')
HISTORYS_CACHE.VALUE = ret
HISTORYS_CACHE.LAST_CNT = HISTORYS_CACHE.CNT
return ret
}
// 给现存的卡片添加点击事件
document.querySelectorAll('.ContentItem').forEach(el => el.addEventListener('click', bindHistoryEvent))
// 插入历史记录卡片
document.querySelector('.Topstory-container').children[1].children[1]
.insertAdjacentHTML('afterbegin', `<zh-history-card></zh-history-card>`)
// 插入 dialog
document.body.insertAdjacentHTML('beforeEnd', `<zh-dialog></zh-dialog>`)
/** @type {ZHHDialog} */
const dialog = document.querySelector('zh-dialog')
/** @type {ZHHistoryCard} */
const historyCard = document.querySelector('zh-history-card')
// 给历史记录卡片绑定一个点击事件 实时插入历史记录列表
historyCard.button.addEventListener('click', () => {
dialog.historyList.innerHTML = getHistoryListElements()
dialog.showModal()
})
// 监听元素更新，给新添加的内容绑定事件
const targetNode = document.querySelector('.Topstory-recommend')
const config = { childList: true, subtree: true }
/** @type {MutationCallback} */
const callback = (mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type !== 'childList') continue
mutation.addedNodes.forEach(node => {
/** @type {HTMLElement | undefined} */
const contentItem = node.querySelector('.ContentItem')
if (contentItem) contentItem.addEventListener('click', bindHistoryEvent)
})
}
}
const observer = new MutationObserver(callback)
observer.observe(targetNode, config)