Well, as I said, one way to inject the font is as a data:
URL.
Except for maybe typos, this should work:
async function injectFontIntoAllPages({ name, path, weight, style, type, }) {
const data = await fetchAsDataUrl(path);
type = type || (/\/(.*?);/).exec(data)[1]; // this may not work correctly
const code = `@font-face {
font-family: '${name}';
font-weight: ${weight};
font-style: ${style};
src: ${data} format('${type}');
}`;
return browser.contentScripts.register({
css: { code, },
allFrames: true, matchAboutBlank: true,
matches: '<all_urls>', runAt: 'document_start',
});
}
/// Downloads an online resource or loads a bundled file by absolute path
/// and returns it as base64 `data:` URL with MIME-type.
function fetchAsDataUrl(url) {
return fetch(url)
.then(_=>_.blob()).then(blob => new Promise((onload, onerror) => {
Object.assign(new FileReader, {
onerror, onload() { onload(this.result); },
}).readAsDataURL(blob);
}));
}