' + ele.innerHTML + ''
}
function doNotTranslateCode () {
const pres = document.querySelectorAll('pre')
pres.forEach(function (pre) {
if (!hasCodeEleChild(pre)) addCodeEle(pre)
})
}
const _ = {}
_.debounce = function (func, wait) {
var lastCallTime
var lastThis
var lastArgs
var timerId
function startTimer (timerExpired, wait) {
return setTimeout(timerExpired, wait)
}
function remainingWait (time) {
const timeSinceLastCall = time - lastCallTime
const timeWaiting = wait - timeSinceLastCall
return timeWaiting
}
function shoudInvoking (time) {
return lastCallTime !== undefined && time - lastCallTime >= wait
}
function timerExpired () {
const time = Date.now()
if (shoudInvoking(time)) {
return invokeFunc()
}
timerId = startTimer(timerExpired, remainingWait(time))
}
function invokeFunc () {
timerId = undefined
const args = lastArgs
const thisArg = lastThis
let result = func.apply(thisArg, args)
lastArgs = lastThis = undefined
return result
}
function debounced (...args) {
let time = Date.now()
lastThis = this
lastArgs = args
lastCallTime = time
if (timerId === undefined) {
timerId = startTimer(timerExpired, wait)
}
}
return debounced
}
const body = document.body
const option = {
childList: true,
subtree: true
}
let time = 0
function doNotTranslate (mutations, observer) {
// 处于过于频繁的 DOM 变更时, 暂停监听 50ms, 并放弃累积的未处理的变更事件
if (time >= 20) {
observer.disconnect()
observer.takeRecords()
time = 0
setTimeout(function () {
mo.observe(body, option)
}, 50)
}
doNotTranslateCode()
time++
log(`第${time}次执行: doNotTranslate`)
}
const MutationObserver =
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver
const mo = new MutationObserver(_.debounce(doNotTranslate, 50))
const currentHostName = [window.location.host]
let hostNames = getCacheValue('hostNames')
if (!hostNames) {
setCacheValue('hostNames', ['www.npmjs.com'])
} else {
if (hostNames.includes(...currentHostName)){
doNotTranslateCode()
mo.observe(body, option)
}
}
// 注册设置页
GM_registerMenuCommand('不要翻译这个页面的代码', () => {
hostNames = getCacheValue('hostNames')
if (hostNames.includes(...currentHostName)) return false
doNotTranslateCode()
mo.observe(body, option)
const newhostNames= [...currentHostName, ...hostNames]
setCacheValue('hostNames', newhostNames)
}, 'D')
// 环境探测
const envDetection = [
unsafeWindow.Prism,
unsafeWindow.hljs,
unsafeWindow.prettyPrint
]
if (envDetection.some(item => !!item)) return false
const fontSize = getCacheValue('fontSize') || 16
const isApplyThemeChanges = getCacheValue('isApplyThemeChanges') || 'Yes'
const isApplyFontChanges = getCacheValue('isApplyFontChanges') || 'Yes'
const isGFW = getCacheValue('isGFW') || 'Fuck'
const isForcePreBackground =
getCacheValue('isForcePreBackground') || 'Yes'
const getCurrentThemeBackground = styleText =>
styleText.match(/background:(.*?)[;}]/)[1]
// 轮询
const poll = ({
condition,
resolve,
reject = () => {},
millisecond = 1000,
retries = 1
}) => {
if (condition()) return resolve()
let time = 0
const int = setInterval(() => {
time++
if (condition()) {
clearInterval(int)
return resolve()
} else if (time > retries) {
clearInterval(int)
return reject()
}
}, millisecond)
const stop = () => {
clearInterval(int)
}
return stop
}
const fetchStyleText = url =>
fetch(url, {
headers: {
'Content-Type': 'text/plain'
}
}).then(response => {
return response.text()
})
// 获取并设置样式
const setStyle = () => {
// 获取主题样式并添加
const themeStyle = getCacheValue(currentTheme)
if (themeStyle) {
GM_addStyle(themeStyle)
} else {
const themeUrl =
this.GFW === 'Fuck'
? `https://cdn.bootcss.com/highlight.js/9.15.10/styles/${currentTheme}.min.css`
: `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/${currentTheme}.min.css`
fetchStyleText(themeUrl).then(style => {
GM_addStyle(style)
setCacheValue(currentTheme, style)
})
}
// 获取字体样式并添加
const fontStyle = getCacheValue(currentFont)
if (fontStyle) {
GM_addStyle(fontStyle)
} else {
const fontUrl = isGFW
? `https://fonts.loli.net/css?family=${currentFont}&display=swap`
: `https://fonts.googleapis.com/css?family=${currentFont}&display=swap`
fetchStyleText(fontUrl).then(style => {
GM_addStyle(style)
setCacheValue(currentFont, style)
})
}
}
// 为 code 片断应用 highlightBlock 并设置字体样式
const beautify = () => {
setStyle()
const font = new window.FontFaceObserver(currentFont)
font.load().then(
() => {
log('Font is available')
for (const pre of Array.from(document.querySelectorAll('pre'))) {
const code = pre.querySelector('code')
if (isApplyThemeChanges && code) {
code.classList.remove('language-text')
window.hljs.highlightBlock(code)
}
if (isApplyFontChanges === 'Yes' && code) {
code.style.fontFamily = currentFont
code.style.fontSize = `${fontSize}px`
}
if (isForcePreBackground === 'Yes') {
pre.style.background = getCurrentThemeBackground(
getCacheValue(currentTheme)
)
}
}
},
() => {
log('Font is not available')
}
)
}
// 设置页
let parasitifer = null
const openSetting = () => {
// 非首次调用
if (parasitifer) {
parasitifer.show()
return true
}
parasitifer = document.createElement('div') // 此 DOM 节点将用作 shadowDOM 的载体被插入宿主的 DOM 节点中.
parasitifer.id = 'host-element'
parasitifer.style = `position: fixed;top:0;bottom:0;z-index:9999;width:100vw;height:100vh;font-size:16px;background-color:#fff;`
parasitifer.show = () => {
parasitifer.style.display = 'block'
}
parasitifer.hide = () => {
parasitifer.style.display = 'none'
}
const shadowRoot = parasitifer.attachShadow({ mode: 'open' })
// 此节点将成为 shadowDOM 的直接子元素, 包裹一切, 所以用 HTML 元素很合适.
// 不仅仅是语义上的合适, 大多数的 UI 库都需要一个结构完整的 DOM 树用来做自适应布局.
const shadowContent = document.createElement('HTML')
const shadowStyleEle = document.createElement('style')
const bulmaStyleEle = document.createElement('style')
const fontStyleEle = document.createElement('style')
const themeStyleEle = document.createElement('style')
const vueContainer = document.createElement('div') // 这个 DOM 节点不会显示在 DOM 树中, 而是作为 vue 的挂载点,同来渲染 vue 的模板.
vueContainer.id = 'vue-root'
// shadow DOM 的样式作用域隔离是非常实用的特性, 完全不受宿主环境影响的样式, 轻盈的开始
shadowStyleEle.innerText = ``
shadowContent.appendChild(shadowStyleEle)
shadowContent.appendChild(bulmaStyleEle)
shadowContent.appendChild(fontStyleEle)
shadowContent.appendChild(themeStyleEle)
shadowContent.appendChild(vueContainer)
shadowRoot.appendChild(shadowContent)
document.body.appendChild(parasitifer)
const mount = style => {
bulmaStyleEle.innerText = style
const vueRoot = document
.querySelector('#host-element')
.shadowRoot.querySelector('#vue-root')
// 这里使用 body 元素 作为父节点, 结合上面创造的 HTML 元素是为了给 UI 组件一个完整的上下文环境, 就像在一个新的 HTML 页面中一样.
const vueTemplate = `