// ==UserScript==
// @name Local YouTube Downloader
// @name:zh-TW 本地 YouTube 下載器
// @name:zh-HK 本地 YouTube 下載器
// @name:zh-CN 本地 YouTube 下载器
// @name:ja ローカル YouTube ダウンローダー
// @name:kr 로컬 YouTube 다운로더
// @namespace https://blog.maple3142.net/
// @version 0.9.53
// @description Download YouTube videos without external service.
// @description:zh-TW 不需透過第三方服務即可下載 YouTube 影片。
// @description:zh-HK 不需透過第三方服務即可下載 YouTube 影片。
// @description:zh-CN 不需要透过第三方的服务就能下载 YouTube 视频。
// @description:ja 外部サービスなしで YouTube 動画をダウンロード
// @description:kr 외부 서비스없이 YouTube 동영상을 다운로드
// @description:fr Obtenez un lien brut YouTube sans service externe.
// @description:cs Stahujte YouTube videa bez externích služeb.
// @author maple3142
// @match https://*.youtube.com/*
// @require https://unpkg.com/[email protected]/dist/vue.js
// @require https://unpkg.com/[email protected]/xfetch.min.js
// @require https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js
// @require https://bundle.run/[email protected]
// @grant GM_xmlhttpRequest
// @grant GM_info
// @grant GM_setValue
// @grant GM_getValue
// @grant unsafeWindow
// @run-at document-end
// @connect googlevideo.com
// @compatible firefox >=52
// @compatible chrome >=55
// @license MIT
// ==/UserScript==
;(function () {
'use strict'
if (
window.top === window.self &&
GM_info.scriptHandler === 'Tampermonkey' &&
GM_getValue('tampermonkey_breaks_should_alert', true)
) {
alert(
`Tampermonkey recently release a breaking change that breaks this script, which is fixed in Tampermonkey BETA right now. You should switch to Tampermonkey BETA or use Violentmonkey before the fix has been released in stable channel.`
)
GM_setValue('tampermonkey_breaks_should_alert', false)
}
const DEBUG = true
const createLogger = (console, tag) =>
Object.keys(console)
.map(k => [k, (...args) => (DEBUG ? console[k](tag + ': ' + args[0], ...args.slice(1)) : void 0)])
.reduce((acc, [k, fn]) => ((acc[k] = fn), acc), {})
const logger = createLogger(console, 'YTDL')
const sleep = ms => new Promise(res => setTimeout(res, ms))
const LANG_FALLBACK = 'en'
const LOCALE = {
en: {
togglelinks: 'Show/Hide Links',
stream: 'Stream',
adaptive: 'Adaptive (No Sound)',
videoid: 'Video ID: ',
inbrowser_adaptive_merger: 'Online Adaptive Video & Audio Merger (FFmpeg)',
dlmp4: 'Download high-resolution mp4 in one click',
get_video_failed: 'Failed to get video infomation for unknown reason, refresh the page may work.',
live_stream_disabled_message: 'Local YouTube Downloader is not available for live stream'
},
'zh-tw': {
togglelinks: '顯示 / 隱藏連結',
stream: '串流 Stream',
adaptive: '自適應 Adaptive (沒有聲音)',
videoid: '影片 ID: ',
inbrowser_adaptive_merger: '線上自適應影片及音訊合成工具 (FFmpeg)',
dlmp4: '一鍵下載高畫質 mp4',
get_video_failed: '無法取得影片資訊，重新整理頁面可能會有效果。',
live_stream_disabled_message: '因為是直播的緣故，本地 YouTube 下載器的功能是停用的。'
},
'zh-hk': {
togglelinks: '顯示／隱藏連結',
stream: '串流 Stream',
adaptive: '自動適應 Adaptive (沒有聲音)',
videoid: '影片 ID: ',
inbrowser_adaptive_merger: '網上自動適應影片及音訊合成工具 (FFmpeg)',
dlmp4: '一 click 下載高畫質 mp4',
get_video_failed: '無法取得影片資訊，重新整理頁面可能會有效果。',
live_stream_disabled_message: '本地 YouTube 下載器無法用於直播。'
},
zh: {
togglelinks: '显示／隐藏链接',
stream: '串流 Stream',
adaptive: '自适应 Adaptive (没有声音)',
videoid: '视频 ID: ',
inbrowser_adaptive_merger: '线上自适应视频及音频合成工具 (FFmpeg)',
dlmp4: '一键下载高画质 mp4',
get_video_failed: '无法取得影片资讯，重新整理页面可能会有效果。',
live_stream_disabled_message: '因为是直播，本地 YouTube 下载器的功能已被禁用。'
},
ja: {
togglelinks: 'リンク表示・非表示',
stream: 'ストリーミング',
adaptive: 'アダプティブ（音無し）',
videoid: 'ビデオ ID: ',
inbrowser_adaptive_merger: 'ビデオとオーディオを合併するオンラインツール (FFmpeg)',
dlmp4: 'ワンクリックで高解像度の mp4 をダウンロード',
live_stream_disabled_message: 'ライブ配信のため、ローカル YouTube ダウンローダーは無効になっています。'
},
kr: {
togglelinks: '링크 보이기 · 숨기기',
stream: '스트리밍',
adaptive: '적응 (어댑티브)',
videoid: '비디오 ID: ',
inbrowser_adaptive_merger: '비디오와 오디오를 합병하는 온라인 도구 (FFmpeg)',
dlmp4: '한 번의 클릭으로 고해상도 mp4 다운로드'
},
es: {
togglelinks: 'Mostrar/Ocultar Links',
stream: 'Stream',
adaptive: 'Adaptable',
videoid: 'Id del Video: ',
inbrowser_adaptive_merger: 'Acoplar Audio a Video (FFmpeg)'
},
he: {
togglelinks: 'הצג/הסתר קישורים',
stream: 'סטרים',
adaptive: 'אדפטיבי',
videoid: 'מזהה סרטון: '
},
fr: {
togglelinks: 'Afficher/Masquer les liens',
stream: 'Stream',
adaptive: 'Adaptative',
videoid: 'ID vidéo: ',
inbrowser_adaptive_merger: 'Fusionner vidéos et audios adaptatifs dans le navigateur (FFmpeg)',
dlmp4: 'Téléchargez la plus haute résolution mp4 en un clic'
},
pl: {
togglelinks: 'Pokaż/Ukryj Linki',
stream: 'Stream',
adaptive: 'Adaptywne',
videoid: 'ID filmu: ',
inbrowser_adaptive_merger: 'Połącz audio i wideo adaptywne w przeglądarce (FFmpeg)',
dlmp4: 'Pobierz .mp4 w najwyższej jakości'
},
hi: {
togglelinks: 'लिंक टॉगल करें',
stream: 'स्ट्रीमिंग (Stream)',
adaptive: 'अनुकूली (Adaptive)',
videoid: 'वीडियो आईडी: {{id}}'
},
ru: {
togglelinks: 'Показать/Cкрыть ссылки',
stream: 'Поток',
adaptive: 'Адаптивный',
videoid: 'Идентификатор видео: ',
inbrowser_adaptive_merger: 'Адаптивное слияние видео и аудио онлайн (FFmpeg)',
dlmp4: 'Скачать mp4 в высоком разрешении в один клик',
get_video_failed:
'Не удалось получить информацию о видео по неизвестной причине, попробуйте обновить страницу.',
live_stream_disabled_message: 'Локальный загрузчик YouTube недоступен для прямой трансляции'
},
ua: {
togglelinks: 'Показати/Приховати посилання',
stream: 'Потік',
adaptive: 'Адаптивний',
videoid: 'Ідентифікатор відео: ',
inbrowser_adaptive_merger: 'Адаптивне злиття відео і аудіо онлайн (FFmpeg)',
dlmp4: 'Завантажити mp4 у високій роздільній здатності в один клік',
get_video_failed:
'Не вдалося отримати інформацію про відео з невідомої причини, спробуйте оновити сторінку.',
live_stream_disabled_message: 'Локальний завантажувач YouTube недоступний для прямої трансляції'
},
cs: {
togglelinks: 'Zobrazit/Skrýt odkazy',
stream: 'Stream',
adaptive: 'Adaptivní',
videoid: 'ID videa: ',
inbrowser_adaptive_merger: 'Online nástroj pro sloučení videa a audia (FFmpeg)',
dlmp4: 'Stáhnout video mp4 jedním kliknutím ve vysokém rozlišení',
get_video_failed: 'Nepodařilo se nahrát informace o videu. Zkuste obnovit stránku (F5).',
live_stream_disabled_message: 'Local YouTube Downloader není dostupný pro živé vysílání'
}
}
for (const [lang, data] of Object.entries(LOCALE)) {
if (lang === LANG_FALLBACK) continue
for (const key of Object.keys(LOCALE[LANG_FALLBACK])) {
if (!(key in data)) {
data[key] = LOCALE[LANG_FALLBACK][key]
}
}
}
const findLang = l => {
l = l.replace('-Hant', '') // special case for zh-Hant-TW
// language resolution logic: zh-tw --(if not exists)--> zh --(if not exists)--> LANG_FALLBACK(en)
l = l.toLowerCase().replace('_', '-')
if (l in LOCALE) return l
else if (l.length > 2) return findLang(l.split('-')[0])
else return LANG_FALLBACK
}
const getLangCode = () => {
const html = document.querySelector('html')
if (html) {
return html.lang
} else {
return navigator.language
}
}
const $ = (s, x = document) => x.querySelector(s)
const $el = (tag, opts) => {
const el = document.createElement(tag)
Object.assign(el, opts)
return el
}
const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
const parseDecsig = data => {
try {
if (data.startsWith('var script')) {
// they inject the script via script tag
const obj = {}
const document = {
createElement: () => obj,
head: { appendChild: () => {} }
}
eval(data)
data = obj.innerHTML
}
const fnnameresult = /=([a-zA-Z0-9\$_]+?)\(decodeURIComponent/.exec(data)
const fnname = fnnameresult[1]
const _argnamefnbodyresult = new RegExp(escapeRegExp(fnname) + '=function\\((.+?)\\){((.+)=\\2.+?)}').exec(
data
)
const [_, argname, fnbody] = _argnamefnbodyresult
const helpernameresult = /;([a-zA-Z0-9$_]+?)\..+?\(/.exec(fnbody)
const helpername = helpernameresult[1]
const helperresult = new RegExp('var ' + escapeRegExp(helpername) + '={[\\s\\S]+?};').exec(data)
const helper = helperresult[0]
logger.log(`parsedecsig result: %s=>{%s\n%s}`, argname, helper, fnbody)
return new Function([argname], helper + '\n' + fnbody)
} catch (e) {
logger.error('parsedecsig error: %o', e)
logger.info('script content: %s', data)
logger.info(
'If you encounter this error, please copy the full "script content" to https://pastebin.com/ for me.'
)
}
}
const parseQuery = s => [...new URLSearchParams(s).entries()].reduce((acc, [k, v]) => ((acc[k] = v), acc), {})
const parseResponse = (id, playerResponse, decsig) => {
logger.log(`video %s playerResponse: %o`, id, playerResponse)
let stream = []
if (playerResponse.streamingData.formats) {
stream = playerResponse.streamingData.formats.map(x =>
Object.assign({}, x, parseQuery(x.cipher || x.signatureCipher))
)
logger.log(`video %s stream: %o`, id, stream)
for (const obj of stream) {
if (obj.s) {
obj.s = decsig(obj.s)
obj.url += `&${obj.sp}=${encodeURIComponent(obj.s)}`
}
}
}
let adaptive = []
if (playerResponse.streamingData.adaptiveFormats) {
adaptive = playerResponse.streamingData.adaptiveFormats.map(x =>
Object.assign({}, x, parseQuery(x.cipher || x.signatureCipher))
)
logger.log(`video %s adaptive: %o`, id, adaptive)
for (const obj of adaptive) {
if (obj.s) {
obj.s = decsig(obj.s)
obj.url += `&${obj.sp}=${encodeURIComponent(obj.s)}`
}
}
}
logger.log(`video %s result: %o`, id, { stream, adaptive })
return { stream, adaptive, details: playerResponse.videoDetails, playerResponse }
}
// video downloader
const xhrDownloadUint8Array = async ({ url, contentLength }, progressCb) => {
if (typeof contentLength === 'string') contentLength = parseInt(contentLength)
progressCb({
loaded: 0,
total: contentLength,
speed: 0
})
const chunkSize = 65536
const getBuffer = (start, end) =>
fetch(url + `&range=${start}-${end ? end - 1 : ''}`).then(r => r.arrayBuffer())
const data = new Uint8Array(contentLength)
let downloaded = 0
const queue = new pQueue.default({ concurrency: 6 })
const startTime = Date.now()
const ps = []
for (let start = 0; start < contentLength; start += chunkSize) {
const exceeded = start + chunkSize > contentLength
const curChunkSize = exceeded ? contentLength - start : chunkSize
const end = exceeded ? null : start + chunkSize
const p = queue.add(() => {
console.log('dl start', url, start, end)
return getBuffer(start, end)
.then(buf => {
console.log('dl done', url, start, end)
downloaded += curChunkSize
data.set(new Uint8Array(buf), start)
const ds = (Date.now() - startTime + 1) / 1000
progressCb({
loaded: downloaded,
total: contentLength,
speed: downloaded / ds
})
})
.catch(err => {
queue.clear()
alert('Download error')
})
})
ps.push(p)
}
await Promise.all(ps)
return data
}
const ffWorker = FFmpeg.createWorker({
logger: DEBUG ? m => logger.log(m.message) : () => {}
})
let ffWorkerLoaded = false
const mergeVideo = async (video, audio) => {
if (!ffWorkerLoaded) await ffWorker.load()
await ffWorker.write('video.mp4', video)
await ffWorker.write('audio.mp4', audio)
await ffWorker.run('-i video.mp4 -i audio.mp4 -c copy output.mp4', {
input: ['video.mp4', 'audio.mp4'],
output: 'output.mp4'
})
const { data } = await ffWorker.read('output.mp4')
await ffWorker.remove('output.mp4')
return data
}
const triggerDownload = (url, filename) => {
const a = document.createElement('a')
a.href = url
a.download = filename
document.body.appendChild(a)
a.click()
a.remove()
}
const dlModalTemplate = `
<div style="width: 100%; height: 100%;">
<div v-if="merging" style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px;">Merging video, please wait...</div>
<div v-else style="height: 100%; width: 100%; display: flex; flex-direction: column;">
<div style="flex: 1; margin: 10px;">
<p style="font-size: 24px;">Video</p>
<progress style="width: 100%;" :value="video.progress" min="0" max="100"></progress>
<div style="display: flex; justify-content: space-between;">
<span>{{video.speed}} kB/s</span>
<span>{{video.loaded}}/{{video.total}} MB</span>
</div>
</div>
<div style="flex: 1; margin: 10px;">
<p style="font-size: 24px;">Audio</p>
<progress style="width: 100%;" :value="audio.progress" min="0" max="100"></progress>
<div style="display: flex; justify-content: space-between;">
<span>{{audio.speed}} kB/s</span>
<span>{{audio.loaded}}/{{audio.total}} MB</span>
</div>
</div>
</div>
</div>
`
function openDownloadModel(adaptive, title) {
const win = open(
'',
'Video Download',
`toolbar=no,height=${screen.height / 2},width=${screen.width / 2},left=${screenLeft},top=${screenTop}`
)
const div = win.document.createElement('div')
win.document.body.appendChild(div)
win.document.title = `Downloading "${title}"`
const dlModalApp = new Vue({
template: dlModalTemplate,
data() {
return {
video: {
progress: 0,
total: 0,
loaded: 0,
speed: 0
},
audio: {
progress: 0,
total: 0,
loaded: 0,
speed: 0
},
merging: false
}
},
methods: {
async start(adaptive, title) {
win.onbeforeunload = () => true
// YouTube's default order is descending by video quality
const videoObj = adaptive
.filter(x => x.mimeType.includes('video/mp4') || x.mimeType.includes('video/webm'))
.map(v => {
const [_, quality, fps] = /(\d+)p(\d*)/.exec(v.qualityLabel)
v.qualityNum = parseInt(quality)
v.fps = fps ? parseInt(fps) : 30
return v
})
.sort((a, b) => {
if (a.qualityNum === b.qualityNum) return b.fps - a.fps // ex: 30-60=-30, then a will be put before b
return b.qualityNum - a.qualityNum
})[0]
const audioObj = adaptive.find(x => x.mimeType.includes('audio/mp4'))
const vPromise = xhrDownloadUint8Array(videoObj, e => {
this.video.progress = (e.loaded / e.total) * 100
this.video.loaded = (e.loaded / 1024 / 1024).toFixed(2)
this.video.total = (e.total / 1024 / 1024).toFixed(2)
this.video.speed = (e.speed / 1024).toFixed(2)
})
const aPromise = xhrDownloadUint8Array(audioObj, e => {
this.audio.progress = (e.loaded / e.total) * 100
this.audio.loaded = (e.loaded / 1024 / 1024).toFixed(2)
this.audio.total = (e.total / 1024 / 1024).toFixed(2)
this.audio.speed = (e.speed / 1024).toFixed(2)
})
const [varr, aarr] = await Promise.all([vPromise, aPromise])
this.merging = true
win.onunload = () => {
// trigger download when user close it
const bvurl = URL.createObjectURL(new Blob([varr]))
const baurl = URL.createObjectURL(new Blob([aarr]))
triggerDownload(bvurl, title + '-videoonly.mp4')
triggerDownload(baurl, title + '-audioonly.mp4')
}
const result = await Promise.race([mergeVideo(varr, aarr), sleep(1000 * 25).then(() => null)])
if (!result) {
alert('An error has occurred when merging video')
const bvurl = URL.createObjectURL(new Blob([varr]))
const baurl = URL.createObjectURL(new Blob([aarr]))
triggerDownload(bvurl, title + '-videoonly.mp4')
triggerDownload(baurl, title + '-audioonly.mp4')
return this.close()
}
this.merging = false
const url = URL.createObjectURL(new Blob([result]))
triggerDownload(url, title + '.mp4')
win.onbeforeunload = null
win.onunload = null
win.close()
}
}
}).$mount(div)
dlModalApp.start(adaptive, title)
}
const template = `
<div class="box" :class="{'dark':dark}">
<template v-if="!isLiveStream">
<div v-if="adaptive.length" class="of-h t-center c-pointer lh-20">
<a class="fs-14px" @click="dlmp4" v-text="strings.dlmp4"></a>
</div>
<div @click="hide=!hide" class="box-toggle div-a t-center fs-14px c-pointer lh-20" v-text="strings.togglelinks"></div>
<div :class="{'hide':hide}">
<div class="t-center fs-14px" v-text="strings.videoid+id"></div>
<div class="d-flex">
<div class="f-1 of-h">
<div class="t-center fs-14px" v-text="strings.stream"></div>
<a class="ytdl-link-btn fs-14px" target="_blank" v-for="vid in stream" :href="vid.url" :title="vid.type" v-text="formatStreamText(vid)"></a>
</div>
<div class="f-1 of-h">
<div class="t-center fs-14px" v-text="strings.adaptive"></div>
<a class="ytdl-link-btn fs-14px" target="_blank" v-for="vid in adaptive" :href="vid.url" :title="vid.type" v-text="formatAdaptiveText(vid)"></a>
</div>
</div>
<div class="of-h t-center">
<a class="fs-14px" href="https://maple3142.github.io/mergemp4/" target="_blank" v-text="strings.inbrowser_adaptive_merger"></a>
</div>
</div>
</template>
<template v-else>
<div class="t-center fs-14px lh-20" v-text="strings.live_stream_disabled_message"></div>
</template>
</div>
`.slice(1)
const app = new Vue({
data() {
return {
hide: true,
id: '',
isLiveStream: false,
stream: [],
adaptive: [],
details: null,
dark: false,
lang: findLang(getLangCode())
}
},
computed: {
strings() {
return LOCALE[this.lang.toLowerCase()]
}
},
methods: {
dlmp4() {
openDownloadModel(this.adaptive, this.details.title)
},
formatStreamText(vid) {
return [vid.qualityLabel, vid.quality].filter(x => x).join(': ')
},
formatAdaptiveText(vid) {
let str = [vid.qualityLabel, vid.mimeType].filter(x => x).join(': ')
if (vid.mimeType.includes('audio')) {
str += ` ${Math.round(vid.bitrate / 1000)}kbps`
}
return str
}
},
template
})
logger.log(`default language: %s`, app.lang)
// attach element
const shadowHost = $el('div')
const shadow = shadowHost.attachShadow ? shadowHost.attachShadow({ mode: 'closed' }) : shadowHost // no shadow dom
logger.log('shadowHost: %o', shadowHost)
const container = $el('div')
shadow.appendChild(container)
app.$mount(container)
if (DEBUG && typeof unsafeWindow !== 'undefined') {
// expose some functions for debugging
unsafeWindow.$app = app
unsafeWindow.parseQuery = parseQuery
unsafeWindow.parseDecsig = parseDecsig
unsafeWindow.parseResponse = parseResponse
}
const load = async playerResponse => {
try {
const basejs =
(typeof ytplayer !== 'undefined' && 'config' in ytplayer && ytplayer.config.assets
? 'https://' + location.host + ytplayer.config.assets.js
: 'web_player_context_config' in ytplayer
? 'https://' + location.host + ytplayer.web_player_context_config.jsUrl
: null) || $('script[src$="base.js"]').src
const decsig = await xf.get(basejs).text(parseDecsig)
const id = parseQuery(location.search).v
const data = parseResponse(id, playerResponse, decsig)
logger.log('video loaded: %s', id)
app.isLiveStream = data.playerResponse.playabilityStatus.liveStreamability != null
app.id = id
app.stream = data.stream
app.adaptive = data.adaptive
app.details = data.details
const actLang = getLangCode()
if (actLang != null) {
const lang = findLang(actLang)
logger.log('youtube ui lang: %s', actLang)
logger.log('ytdl lang:', lang)
app.lang = lang
}
} catch (err) {
alert(app.strings.get_video_failed)
logger.error('load', err)
}
}
// hook fetch response
const ff = fetch
unsafeWindow.fetch = (...args) => {
if (args[0] instanceof Request) {
return ff(...args).then(resp => {
if (resp.url.includes('player')) {
resp.clone().json().then(load)
}
return resp
})
}
return ff(...args)
}
// attach element
setInterval(() => {
const el =
$('#info-contents') ||
$('#watch-header') ||
$('.page-container:not([hidden]) ytm-item-section-renderer>lazy-list')
if (el && !el.contains(shadowHost)) {
el.appendChild(shadowHost)
}
}, 100)
// init
unsafeWindow.addEventListener('load', () => {
const firstResp = unsafeWindow?.ytplayer?.config?.args?.raw_player_response
if (firstResp) {
load(firstResp)
}
})
// listen to dark mode toggle
const $html = $('html')
new MutationObserver(() => {
app.dark = $html.getAttribute('dark') !== null
}).observe($html, { attributes: true })
app.dark = $html.getAttribute('dark') !== null
const css = `
.hide{
display: none;
}
.t-center{
text-align: center;
}
.d-flex{
display: flex;
}
.f-1{
flex: 1;
}
.fs-14px{
font-size: 14px;
}
.of-h{
overflow: hidden;
}
.box{
padding-top: .5em;
padding-bottom: .5em;
border-bottom: 1px solid var(--yt-border-color);
font-family: Arial;
}
.box-toggle{
margin: 3px;
user-select: none;
-moz-user-select: -moz-none;
}
.ytdl-link-btn{
display: block;
border: 1px solid !important;
border-radius: 3px;
text-decoration: none !important;
outline: 0;
text-align: center;
padding: 2px;
margin: 5px;
color: black;
}
a, .div-a{
text-decoration: none;
color: var(--yt-button-color, inherit);
}
a:hover, .div-a:hover{
color: var(--yt-spec-call-to-action, blue);
}
.box.dark{
color: var(--yt-endpoint-color, var(--yt-spec-text-primary));
}
.box.dark .ytdl-link-btn{
color: var(--yt-endpoint-color, var(--yt-spec-text-primary));
}
.box.dark .ytdl-link-btn:hover{
color: rgba(200, 200, 255, 0.8);
}
.box.dark .box-toggle:hover{
color: rgba(200, 200, 255, 0.8);
}
.c-pointer{
cursor: pointer;
}
.lh-20{
line-height: 20px;
}
`
shadow.appendChild($el('style', { textContent: css }))
const css2 = `
/* https://greasyfork.org/zh-TW/scripts/369400-local-youtube-downloader/discussions/95744 */
#meta-contents,
#info-contents{
display: contents !important;
}
ytd-watch-metadata.style-scope {
display: none !important;
}
`
document.body.appendChild($el('style', { textContent: css2 }))
})()
