diff --git a/extension/manifest-chrome.json b/extension/manifest-chrome.json index b232b96..14a5db6 100644 --- a/extension/manifest-chrome.json +++ b/extension/manifest-chrome.json @@ -20,7 +20,8 @@ "content_scripts": [ { "matches": ["https://www.youtube.com/*"], - "js": ["script.js"] + "js": ["script.js"], + "css": ["script.css"] } ], "background": { diff --git a/extension/manifest-firefox.json b/extension/manifest-firefox.json index ab95420..da1fc54 100644 --- a/extension/manifest-firefox.json +++ b/extension/manifest-firefox.json @@ -18,7 +18,8 @@ "content_scripts": [ { "matches": ["https://www.youtube.com/*"], - "js": ["script.js"] + "js": ["script.js"], + "css": ["script.css"] } ], "background": { diff --git a/extension/script.css b/extension/script.css new file mode 100644 index 0000000..084384f --- /dev/null +++ b/extension/script.css @@ -0,0 +1,18 @@ +.ta-button { + display: flex; + align-items: center; + justify-content: center; + background-color: #00202f; + color: #fff; + font-size: 1.4rem; + text-decoration: none; + border-radius: 8px; + cursor: pointer; + height: fit-content; + opacity: 0; +} + +.ta-title-container { + display: flex; + gap: 15px; +} \ No newline at end of file diff --git a/extension/script.js b/extension/script.js index 42d1e61..ba948fc 100644 --- a/extension/script.js +++ b/extension/script.js @@ -348,20 +348,6 @@ function buildVideoButton(titleContainer) { dlButton.classList.add('ta-button'); dlButton.href = '#'; - Object.assign(dlButton.style, { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - backgroundColor: '#00202f', - color: '#fff', - fontSize: '1.4rem', - textDecoration: 'none', - borderRadius: '8px', - cursor: 'pointer', - height: 'fit-content', - opacity: 0, - }); - let dlIcon = document.createElement('span'); dlIcon.innerHTML = defaultIcon; Object.assign(dlIcon.style, { @@ -394,10 +380,12 @@ function getNearestLink(element) { function processTitle(titleContainer) { if (titleContainer.hasListener) return; - Object.assign(titleContainer.style, { - display: 'flex', - gap: '15px', - }); + titleContainer.classList.add("ta-title-container"); + + if (titleContainer.style.display === "-webkit-box") { + // Compatibility with DeArrow + titleContainer.style.setProperty("display", "flex", "important"); + } titleContainer.classList.add('title-container'); titleContainer.addEventListener('mouseenter', () => {