simplified extension | removed button
This commit is contained in:
array-in-a-matrix
parent
d09030a083
commit
87004f1a02
198
index.js
198
index.js
|
|
@ -1,157 +1,71 @@
|
||||||
const CSS = `
|
// const CSS = `
|
||||||
.ytp-play-progress,
|
// .ytp-play-progress,
|
||||||
.ytp-swatch-background-color {
|
// .ytp-swatch-background-color {
|
||||||
animation: RGB 25s ease-in-out infinite;
|
// animation: RGB 25s ease-in-out infinite;
|
||||||
}
|
// }
|
||||||
|
|
||||||
@keyframes RGB {
|
// @keyframes RGB {
|
||||||
from {
|
// from {
|
||||||
background-color: #FF0000;
|
// background-color: #FF0000;
|
||||||
}
|
// }
|
||||||
|
|
||||||
7% {
|
// 7% {
|
||||||
background-color: #FF7700;
|
// background-color: #FF7700;
|
||||||
}
|
// }
|
||||||
|
|
||||||
14% {
|
// 14% {
|
||||||
background-color: #FFDD00;
|
// background-color: #FFDD00;
|
||||||
}
|
// }
|
||||||
|
|
||||||
21% {
|
// 21% {
|
||||||
background-color: #00FF00;
|
// background-color: #00FF00;
|
||||||
}
|
// }
|
||||||
|
|
||||||
28% {
|
// 28% {
|
||||||
background-color: #0000FF;
|
// background-color: #0000FF;
|
||||||
}
|
// }
|
||||||
|
|
||||||
35% {
|
// 35% {
|
||||||
background-color: #8A2BE2;
|
// background-color: #8A2BE2;
|
||||||
}
|
// }
|
||||||
|
|
||||||
42% {
|
// 42% {
|
||||||
background-color: #C77DF3;
|
// background-color: #C77DF3;
|
||||||
}
|
// }
|
||||||
|
|
||||||
49% {
|
// 49% {
|
||||||
background-color: #C77DF3;
|
// background-color: #C77DF3;
|
||||||
}
|
// }
|
||||||
|
|
||||||
56% {
|
// 56% {
|
||||||
background-color: #8A2BE2;
|
// background-color: #8A2BE2;
|
||||||
}
|
// }
|
||||||
|
|
||||||
63% {
|
// 63% {
|
||||||
background-color: #0000FF;
|
// background-color: #0000FF;
|
||||||
}
|
// }
|
||||||
|
|
||||||
70% {
|
// 70% {
|
||||||
background-color: #00FF00;
|
// background-color: #00FF00;
|
||||||
}
|
// }
|
||||||
|
|
||||||
77% {
|
// 77% {
|
||||||
background-color: #FFDD00;
|
// background-color: #FFDD00;
|
||||||
}
|
// }
|
||||||
|
|
||||||
84% {
|
// 84% {
|
||||||
background-color: #FF7700;
|
// background-color: #FF7700;
|
||||||
}
|
// }
|
||||||
|
|
||||||
91% {
|
// 91% {
|
||||||
background-color: #FF0000;
|
// background-color: #FF0000;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
`;
|
// `;
|
||||||
|
|
||||||
const TITLE_APPLY = "Apply CSS";
|
pageMod.PageMod( {
|
||||||
const TITLE_REMOVE = "Remove CSS";
|
include: '*',
|
||||||
const APPLICABLE_PROTOCOLS = ["http:", "https:"];
|
contentStyleFile: [
|
||||||
|
data.url( 'style.css' )
|
||||||
/*
|
]
|
||||||
Toggle CSS: based on the current title, insert or remove the CSS.
|
})
|
||||||
Update the page action's title and icon to reflect its state.
|
|
||||||
*/
|
|
||||||
function toggleCSS(tab) {
|
|
||||||
|
|
||||||
function gotTitle(title) {
|
|
||||||
if (title === TITLE_APPLY) {
|
|
||||||
browser.pageAction.setIcon({
|
|
||||||
tabId: tab.id,
|
|
||||||
path: "icons/on.svg"
|
|
||||||
});
|
|
||||||
browser.pageAction.setTitle({
|
|
||||||
tabId: tab.id,
|
|
||||||
title: TITLE_REMOVE
|
|
||||||
});
|
|
||||||
browser.tabs.insertCSS({
|
|
||||||
code: CSS
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
browser.pageAction.setIcon({
|
|
||||||
tabId: tab.id,
|
|
||||||
path: "icons/off.svg"
|
|
||||||
});
|
|
||||||
browser.pageAction.setTitle({
|
|
||||||
tabId: tab.id,
|
|
||||||
title: TITLE_APPLY
|
|
||||||
});
|
|
||||||
browser.tabs.removeCSS({
|
|
||||||
code: CSS
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var gettingTitle = browser.pageAction.getTitle({
|
|
||||||
tabId: tab.id
|
|
||||||
});
|
|
||||||
gettingTitle.then(gotTitle);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS.
|
|
||||||
Argument url must be a valid URL string.
|
|
||||||
*/
|
|
||||||
function protocolIsApplicable(url) {
|
|
||||||
const protocol = (new URL(url)).protocol;
|
|
||||||
return APPLICABLE_PROTOCOLS.includes(protocol);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Initialize the page action: set icon and title, then show.
|
|
||||||
Only operates on tabs whose URL's protocol is applicable.
|
|
||||||
*/
|
|
||||||
function initializePageAction(tab) {
|
|
||||||
if (protocolIsApplicable(tab.url)) {
|
|
||||||
browser.pageAction.setIcon({
|
|
||||||
tabId: tab.id,
|
|
||||||
path: "icons/off.svg"
|
|
||||||
});
|
|
||||||
browser.pageAction.setTitle({
|
|
||||||
tabId: tab.id,
|
|
||||||
title: TITLE_APPLY
|
|
||||||
});
|
|
||||||
browser.pageAction.show(tab.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
When first loaded, initialize the page action for all tabs.
|
|
||||||
*/
|
|
||||||
var gettingAllTabs = browser.tabs.query({});
|
|
||||||
gettingAllTabs.then((tabs) => {
|
|
||||||
for (let tab of tabs) {
|
|
||||||
initializePageAction(tab);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
Each time a tab is updated, reset the page action for that tab.
|
|
||||||
*/
|
|
||||||
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
|
|
||||||
initializePageAction(tab);
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
Toggle CSS when the page action is clicked.
|
|
||||||
*/
|
|
||||||
browser.pageAction.onClicked.addListener(toggleCSS);
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
{
|
{
|
||||||
|
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"name": "RGB YouTube",
|
"name": "RGB YouTube",
|
||||||
"version": "1.1",
|
"version": "2.0",
|
||||||
|
|
||||||
"description": "Makes the YouTube progress bar cycle through different RGB colors.",
|
"description": "Makes the YouTube progress bar cycle through different RGB colors.",
|
||||||
|
|
||||||
|
|
@ -19,17 +20,8 @@
|
||||||
|
|
||||||
"content_scripts": [{
|
"content_scripts": [{
|
||||||
"matches": ["*://*.youtube.com/*"],
|
"matches": ["*://*.youtube.com/*"],
|
||||||
"js": ["index.js"]
|
"js": ["index.js"],
|
||||||
}],
|
"css": ["style.css"]
|
||||||
|
}]
|
||||||
|
|
||||||
"background": {
|
|
||||||
"scripts": ["index.js"]
|
|
||||||
},
|
|
||||||
|
|
||||||
"page_action": {
|
|
||||||
"default_icon": "icons/off.svg",
|
|
||||||
"browser_style": true
|
|
||||||
},
|
|
||||||
|
|
||||||
"permissions": ["activeTab", "tabs"]
|
|
||||||
}
|
}
|
||||||
62
style.css
Normal file
62
style.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
.ytp-play-progress,
|
||||||
|
.ytp-swatch-background-color {
|
||||||
|
animation: RGB 25s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes RGB {
|
||||||
|
from {
|
||||||
|
background-color: #FF0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
7% {
|
||||||
|
background-color: #FF7700;
|
||||||
|
}
|
||||||
|
|
||||||
|
14% {
|
||||||
|
background-color: #FFDD00;
|
||||||
|
}
|
||||||
|
|
||||||
|
21% {
|
||||||
|
background-color: #00FF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
28% {
|
||||||
|
background-color: #0000FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
35% {
|
||||||
|
background-color: #8A2BE2;
|
||||||
|
}
|
||||||
|
|
||||||
|
42% {
|
||||||
|
background-color: #C77DF3;
|
||||||
|
}
|
||||||
|
|
||||||
|
49% {
|
||||||
|
background-color: #C77DF3;
|
||||||
|
}
|
||||||
|
|
||||||
|
56% {
|
||||||
|
background-color: #8A2BE2;
|
||||||
|
}
|
||||||
|
|
||||||
|
63% {
|
||||||
|
background-color: #0000FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
background-color: #00FF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
77% {
|
||||||
|
background-color: #FFDD00;
|
||||||
|
}
|
||||||
|
|
||||||
|
84% {
|
||||||
|
background-color: #FF7700;
|
||||||
|
}
|
||||||
|
|
||||||
|
91% {
|
||||||
|
background-color: #FF0000;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue