Skip to content

Commit

Permalink
chore(MV3)[WIP]: injecting CSS now works
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Nov 29, 2022
1 parent 25d2cf4 commit edf96cc
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 266 deletions.
147 changes: 46 additions & 101 deletions scripts/a11ycss.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,42 @@
const level = document.getElementsByName('level');
const button = document.getElementById("a11ycssBtnApply");

console.log(level)

async function getCurrentTab() {
let queryOptions = { active: true, lastFocusedWindow: true };
// `tab` will either be a `tabs.Tab` instance or `undefined`.
let [tab] = await chrome.tabs.query(queryOptions);
return tab;
}

/**
* Helper function for browser storage
* @param {String} strLevel
*/
function storeA11ycss(strLevel, tab) {
// Get a11y.css stored levels
let getLevel = chrome.storage.local.get("a11ycssLevel");
getLevel.then(
// when we got something
(item) => {
function storeA11ycss(strLevel, tabId) {
chrome.storage.local.get("a11ycssLevel").then(
item => {
let a11ycssLevel = [];
if (item && item.a11ycssLevel) {
a11ycssLevel = item.a11ycssLevel;
}
// Add or replace current tab's value
a11ycssLevel[tab.id] = {"level": strLevel};
// And set it back to the storage
a11ycssLevel[tabId] = {"level": strLevel};
let setting = chrome.storage.local.set({ a11ycssLevel });
setting.then(null, onError); // just in case
setting.then(null, onError);
}
);
}

// store choice when one radio button is chosen
level.forEach(function (key) {
key.addEventListener('click', async (event) => {
let tab = await getCurrentTab();
storeA11ycss(event.target.value, tab);
});
});

function storeStatus(strStatus, tab) {
// Get a11y.css stored levels
let getStatus = chrome.storage.local.get("a11ycssStatus");
getStatus.then(
// when we got something
(item) => {
function storeStatus(strStatus, tabId) {
chrome.storage.local.get("a11ycssStatus").then(
item => {
let a11ycssStatus = [];
if (item && item.a11ycssStatus) {
a11ycssStatus = item.a11ycssStatus;
}
// Add or replace current tab's value
a11ycssStatus[tab.id] = {"status": strStatus};
// And set it back to the storage
a11ycssStatus[tabId] = {"status": strStatus};
let setting = chrome.storage.local.set({ a11ycssStatus });
setting.then(null, onError); // just in case
setting.then(null, onError);
}
);
}


// --------------------------------------
function addA11ycss() {
button.addEventListener('click', () => {
let checked = button.getAttribute('aria-checked') === 'true' || false;
let currentLevel = '';
const level = document.getElementsByName('level');
const locale = document.body.getAttribute('lang');
Expand All @@ -72,82 +46,53 @@ function addA11ycss() {
currentLevel = key.value;
}
});
console.log(document);

const file = `/css/a11y-${locale}_${currentLevel}.css`;
let oldStylesheet = document.getElementById("a11ycss_stylechecker");
if ( oldStylesheet ) { oldStylesheet.parentNode.removeChild(oldStylesheet) }
let stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href = chrome.runtime.getURL(file);
// @todo Could be a constant, passed as an argument to the function
// @see https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#cs-func
stylesheet.id = "a11ycss_stylechecker";
document.getElementsByTagName("head")[0].appendChild(stylesheet);
}

function removeA11ycss() {
// @todo Could be a constant, passed as an argument to the function
// @see https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#cs-func
let oldStylesheet = document.getElementById("a11ycss_stylechecker");
if ( oldStylesheet ) { oldStylesheet.parentNode.removeChild(oldStylesheet) }
}

button.addEventListener('click', async (e) => {
let checked = e.target.getAttribute('aria-checked') === 'true' || false;
let tab = await getCurrentTab();
if (checked) {
chrome.scripting.executeScript({
target: {tabId: tab.id},
func: removeA11ycss
});
storeStatus('false', tab);
} else {
chrome.scripting.executeScript({
target: {tabId: tab.id},
func: addA11ycss
getCurrentTab()
.then(tab => {
if (checked) {
chrome.scripting.removeCSS({
target: {tabId: tab.id},
files: [`/css/a11y-${locale}_${currentLevel}.css`]
});
} else {
chrome.scripting.insertCSS({
target: {tabId: tab.id},
files: [`/css/a11y-${locale}_${currentLevel}.css`]
});
}
})
.then(tab => {
button.setAttribute('aria-checked', String(!checked));
storeStatus(!checked, tab.id);
storeA11ycss(currentLevel, tab.id);
});
storeStatus('true', tab);
}
e.target.setAttribute('aria-checked', String(!checked));
});
// --------------------------------------

// on document load, if we have already chosen a level, give it back
// (the first option is checked in the popup's HTML by default)
function a11ycssOnload() {
let getLevel = chrome.storage.local.get("a11ycssLevel");
getLevel.then(
// when we got something
async (item) => {
chrome.storage.local.get("a11ycssLevel").then(
item => {
if (item && item.a11ycssLevel) {
let tab = await getCurrentTab();
// If a setting is found for this tab
if (item.a11ycssLevel[tab.id]) {
// a level was set already
level.forEach(function (key) {
key.checked = key.value === item.a11ycssLevel[tab.id].level;
});
}
getCurrentTab().then(tab => {
if (item.a11ycssLevel[tab.id]) {
level.forEach(function (key) {
key.checked = key.value === item.a11ycssLevel[tab.id].level;
});
}
})
}
},
// we got nothing
onError
);

let getStatus = chrome.storage.local.get("a11ycssStatus");
getStatus.then(
// when we got something
async (item) => {
chrome.storage.local.get("a11ycssStatus").then(
item => {
if (item && item.a11ycssStatus) {
let tab = await getCurrentTab();
// If a setting is found for this tab
if (item.a11ycssStatus[tab.id]) {
button.setAttribute('aria-checked', item.a11ycssStatus[tab.id].status);
}
getCurrentTab().then(tab => {
if (item.a11ycssStatus[tab.id]) {
button.setAttribute('aria-checked', item.a11ycssStatus[tab.id].status);
}
})
}
},
// we got nothing
onError
);
}
Expand Down
57 changes: 27 additions & 30 deletions scripts/checkalts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,22 @@ async function getCurrentTab() {
return tab;
}

function storeCheckAltsStatus(strStatus, tab) {
// Get a11y.css stored status
let getStatus = chrome.storage.local.get("checkAltsStatus");
getStatus.then(
// when we got something
(item) => {
function storeCheckAltsStatus(strStatus, tabId) {
chrome.storage.local.get("checkAltsStatus").then(
item => {
let checkAltsStatus = [];
if (item && item.checkAltsStatus) {
checkAltsStatus = item.checkAltsStatus;
}
// Add or replace current tab's value
checkAltsStatus[tab.id] = {"status": strStatus};
// And set it back to the storage
checkAltsStatus[tabId] = {"status": strStatus};
let setting = chrome.storage.local.set({ checkAltsStatus });
setting.then(null, onError); // just in case
setting.then(null, onError);
}
);
}

btnCheckalts.addEventListener('click', async (e) => {
let tab = await getCurrentTab();
btnCheckalts.addEventListener('click', () => {
let checked = btnCheckalts.getAttribute('aria-checked') === 'true' || false;
let icons = {
ok: chrome.runtime.getURL("/icons/ok.svg"),
ko: chrome.runtime.getURL("/icons/ko.svg"),
Expand All @@ -43,30 +38,32 @@ btnCheckalts.addEventListener('click', async (e) => {
ko: _t("altMissing"),
info: _t("altEmpty")
};
chrome.tabs.sendMessage(tab.id, {
a11ycss_action: "checkalts",
icons: icons,
strings: strings
});
let checked = e.target.getAttribute('aria-checked') === 'true' || false;
e.target.setAttribute('aria-checked', String(!checked));
storeCheckAltsStatus(!checked, tab);

getCurrentTab()
.then(tab => {
chrome.tabs.sendMessage(tab.id, {
a11ycss_action: "checkalts",
icons: icons,
strings: strings
});
})
.then(tab => {
btnCheckalts.setAttribute('aria-checked', String(!checked));
storeCheckAltsStatus(!checked, tab.id);
});
});

function checkAltsOnload() {
let getStatus = chrome.storage.local.get("checkAltsStatus");
getStatus.then(
// when we got something
async (item) => {
chrome.storage.local.get("checkAltsStatus").then(
item => {
if (item && item.checkAltsStatus) {
let tab = await getCurrentTab();
// If a setting is found for this tab
if (item.checkAltsStatus[tab.id]) {
btnCheckalts.setAttribute('aria-checked', item.checkAltsStatus[tab.id].status);
}
getCurrentTab().then(tab => {
if (item.checkAltsStatus[tab.id]) {
btnCheckalts.setAttribute('aria-checked', item.checkAltsStatus[tab.id].status);
}
})
}
},
// we got nothing
onError
);
}
Expand Down
87 changes: 31 additions & 56 deletions scripts/outline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,79 +7,54 @@ async function getCurrentTab() {
return tab;
}

function addOutline() {
let outlineStylesheet = document.getElementById("a11ycss_outline");
if ( outlineStylesheet ) { outlineStylesheet.parentNode.removeChild(outlineStylesheet) }
let stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href = chrome.runtime.getURL("/css/outline.css");
stylesheet.id = "a11ycss_outline";
document.getElementsByTagName("head")[0].appendChild(stylesheet);
}

function removeOutline() {
console.log('remove!')
let outlineStylesheet = document.getElementById("a11ycss_outline");
if ( outlineStylesheet ) { outlineStylesheet.parentNode.removeChild(outlineStylesheet) }
}

function storeOutlineStatus(strStatus, tab) {
// Get a11y.css stored status
let getStatus = chrome.storage.local.get("outlineStatus");
getStatus.then(
// when we got something
(item) => {
function storeOutlineStatus(strStatus, tabId) {
chrome.storage.local.get("outlineStatus").then(
item => {
let outlineStatus = [];
if (item && item.outlineStatus) {
outlineStatus = item.outlineStatus;
}
// Add or replace current tab's value
outlineStatus[tab.id] = {"status": strStatus};
// And set it back to the storage
outlineStatus[tabId] = {"status": strStatus};
let setting = chrome.storage.local.set({ outlineStatus });
setting.then(null, onError); // just in case
setting.then(null, onError);
}
);
}

btnOutline.addEventListener('click', async (e) => {
console.log(e)

let checked = e.target.getAttribute('aria-checked') === 'true' || false;
let tab = await getCurrentTab();
console.info(tab)
if (checked) {
chrome.scripting.executeScript({
target: {tabId: tab.id},
func: removeOutline
});
} else {
chrome.scripting.executeScript({
target: {tabId: tab.id},
func: addOutline
btnOutline.addEventListener('click', () => {
let checked = btnOutline.getAttribute('aria-checked') === 'true' || false;
getCurrentTab()
.then(tab => {
if (checked) {
chrome.scripting.removeCSS({
target: {tabId: tab.id},
files: ["/css/outline.css"]
});
} else {
chrome.scripting.insertCSS({
target: {tabId: tab.id},
files: ["/css/outline.css"]
});
}
})
.then(tab => {
btnOutline.setAttribute('aria-checked', String(!checked));
storeOutlineStatus(!checked, tab.id);
});
}
e.target.setAttribute('aria-checked', String(!checked));
storeOutlineStatus(!checked, tab);
});

function outlineOnload() {
let getStatus = chrome.storage.local.get("outlineStatus");
getStatus.then(
// when we got something
async (item) => {
chrome.storage.local.get("outlineStatus").then(
item => {
if (item && item.outlineStatus) {
console.log(item)
let tab = await getCurrentTab();
// If a setting is found for this tab
if (item.outlineStatus[tab.id]) {
btnOutline.setAttribute('aria-checked', item.outlineStatus[tab.id].status);
}
getCurrentTab().then(tab => {
if (item.outlineStatus[tab.id]) {
btnOutline.setAttribute('aria-checked', item.outlineStatus[tab.id].status);
}
});
}
},
// we got nothing
onError
);
}
outlineOnload();
console.log('hop')
Loading

0 comments on commit edf96cc

Please sign in to comment.