Tabs not consistently updated

[RoelN]

Changing the font settings on one tab should execute those changes for all tabs. This is unreliable and doesn't work properly. Tabs that were already open aren't changed.

[arrowtype]

The extension shows an errors log ... maybe this is related?

Context
_generated_background_page.html
Stack Trace
background.js:107 (anonymous function)

stack trace (Click to expand)

// Copyright 2019 Google LLC

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at

//     https://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// Extension variables
let stylesheets = [];
let updateCount = 0;
let prevFonts;
const defaultBlacklist = [
	".icon",
	".Icon",
	".glyphicon",
	".fa",
	".fas",
	".far",
	".fal",
	".fab",
	".font-fontello",
	".material-icons",
	".DPvwYc", // google hangouts
	".Mwv9k", // google hangouts
	".NtU4hc" // google hangouts
];
// Query only the active tab
const tabsSettings = {
	active: true,
	windowType: "normal",
	currentWindow: true
};

chrome.runtime.onInstalled.addListener(() => {
	if (chrome.runtime.lastError) {
		handleError(chrome.runtime.lastError);
	}

	initTypeX();
});

function initTypeX() {
	chrome.tabs.query(tabsSettings, tabs => {
		for (const tab of tabs) {
			chrome.tabs.executeScript(
				tab.id,
				{
					code: `delete document.documentElement.dataset.updatefont;`
				},
				() => {
					if (chrome.runtime.lastError) {
						handleError(chrome.runtime.lastError);
					}
				}
			);
		}
	});
	chrome.storage.local.set(
		{
			extensionActive: false,
			fonts: defaultFonts,
			files: defaultFiles,
			blacklist: defaultBlacklist
		},
		() => {
			generateStyleSheet();
		}
	);
}

chrome.runtime.onStartup.addListener(() => {
	generateStyleSheet();
});

// Update font when tab becomes active
chrome.tabs.onActivated.addListener(() => {
	chrome.storage.local.get("extensionActive", ({ extensionActive }) => {
		updateFonts(extensionActive, false);
	});
});

// Fires when an open tab updates (e.g. following a link)
// and when a new tab is opened
chrome.tabs.onUpdated.addListener((_tabId, { status }, { active }) => {
	if (chrome.runtime.lastError) {
		handleError(chrome.runtime.lastError);
	}

	if (active && status === "loading") {
		chrome.storage.local.get("extensionActive", ({ extensionActive }) => {
			updateFonts(extensionActive, false);
		});
	}
});

// Update fonts across all tabs
function updateFonts(extensionActive, updatingCurrentTab) {
	if (extensionActive) {
		chrome.tabs.query(tabsSettings, tabs => {
			for (const tab of tabs) {
				chrome.tabs.insertCSS(
					tab.id,
					{
						code: "html{opacity:0.75!important}",
						runAt: "document_start"
					},
					() => {
						if (chrome.runtime.lastError) {
							handleError(chrome.runtime.lastError);
						}
					}
				);
			}
		});
	}

	generateStyleSheet(updatingCurrentTab, () => {
		chrome.tabs.query(tabsSettings, tabs => {
			for (const tab of tabs) {
				injectStyleSheet(tab.id, extensionActive);

				if (updatingCurrentTab) {
					chrome.tabs.executeScript(
						tab.id,
						{
							code: `document.documentElement.dataset.updatefont = "${updateCount}";`
						},
						() => {
							if (chrome.runtime.lastError) {
								handleError(chrome.runtime.lastError);
							}
						}
					);
				}
			}
		});
	});
}

// Injecting the stylesheet is fast, adding a class to
// the body isn't. We don't want a delay, so the CSS will
// enable the fonts immediately, and we only add a class
// when we want to *remove* the custom fonts.
function injectStyleSheet(tabId, extensionActive) {
	if (chrome.runtime.lastError) {
		handleError(chrome.runtime.lastError);
	}

	let stylesheetsCode = stylesheets.join("\n");
	stylesheetsCode += "\nhtml{opacity:1!important}";

	if (extensionActive) {
		// Inject CSS to activate font
		chrome.tabs.insertCSS(
			tabId,
			{
				code: stylesheetsCode,
				runAt: "document_start"
			},
			() => {
				if (chrome.runtime.lastError) {
					handleError(chrome.runtime.lastError);
				}
			}
		);

		// Remove force-disable class
		chrome.tabs.executeScript(
			tabId,
			{
				code: `delete document.documentElement.dataset.disablefont;`
			},
			() => {
				if (chrome.runtime.lastError) {
					handleError(chrome.runtime.lastError);
				}
			}
		);
	} else {
		// Add force-disable class
		chrome.tabs.executeScript(
			tabId,
			{
				code: `document.documentElement.dataset.disablefont = "";`
			},
			() => {
				if (chrome.runtime.lastError) {
					handleError(chrome.runtime.lastError);
				}
			}
		);
	}
}

function generateStyleSheet(updatingCurrentTab, callback) {
	chrome.storage.local.get(["fonts", "files", "blacklist"], ({ fonts, files, blacklist }) => {
		// Check if fonts have been updated
		const currentFonts = JSON.stringify(fonts);
		const same = currentFonts == prevFonts;
		prevFonts = currentFonts;
		if (!same) updateCount++;

		const updateSelector = updatingCurrentTab
			? `html[data-updatefont="${updateCount}"]`
			: "html:not([data-updatefont])";
		stylesheets = [];

		const blacklistSelectors = (() => {
			let b = "";
			for (const blacklistItem of blacklist) {
				b += `:not(${blacklistItem})`;
			}
			return b;
		})();

		for (const font of fonts) {
			const selectors = [];
			const axesStyles = [];
			let fontName = font.name;
			let stylesheet = "";

			for (const selector of font.selectors) {
				selectors.push(`${updateSelector}:not([data-disablefont]) ${selector}${blacklistSelectors}`);
			}

			let axes = false;
			if (font.axes && Object.entries(font.axes).length) {
				axes = font.axes;
			} else if (font.file in files) {
				axes = files[font.file].axes;
			}

			// Only inject variable axes when font has axes,
			// and we don't want to inherit page styles
			if (axes && !font.inherit) {
				for (const axisData in axes) {
					axesStyles.push(`'${axes[axisData].id}' ${axes[axisData].value}`);
				}
				fontName = font.name + font.id;
			}

			if (font.file in files) {
				stylesheet += `
                            @font-face {
                                font-family: '${fontName}';
                                src: url('${files[font.file].file}');
                                font-weight: 100 900;
                                font-stretch: 50% 200%;
                            }`;
			}

			const stack = `'${fontName}', ${font.fallback}`;
			stylesheet += `
                        ${selectors.join(",")} {
                            font-family: ${stack} !important;
                            ${axesStyles.length ? `font-variation-settings: ${axesStyles.join(",")};` : ""}
                            ${font.css}
                        }`;

			stylesheets.push(stylesheet);
		}

		callback && callback();
	});
}

function handleError(error) {
	// console.error(error);
}