opracowanie rozszerzen

File organisation

The scripts are in webextension/scripts/ and are organised as follow:

scripts                   Main folder for scripts
|
|-* constants.js          Constants for browsers
|-* locales.js            All strings
|-* utils.js              What it says on the cover: utilities
|-* [all other JS]        One script per functionality
|
|-- injected              Content scripts
|-- background            Background scripts

API between the extension and the pages

Each script that needs to execute a content script has to call it that way:

browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
	browser.tabs.sendMessage(tabs[0].id, {
		a11ycss_action: "checkalts",
		// [… other parameters …]
	});
});

For instance this will be listened to by the injected content script checkalts.js, which will react accordingly:

browser.runtime.onMessage.addListener((message) => {
	if (message.a11ycss_action && message.a11ycss_action === "checkalts") {
		// this is where the actions are going to be called
	}
});

Per tab statuses storage

When using the WebExtension, you might need to apply different settings in multiple tabs at the same time. Thus you'll need each tab to remember a11y.css tools's statuses, allowing you to switch tabs and get back without having to refresh your page.

This is possible thanks to Browser Storage.

Store status

This method is called when clicking on setting's button that triggers activation.

function storeTextSpacingStatus(strStatus) {
	// Get current tab ID
	browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
		// Get a11y.css stored status
		browser.storage.local.get("textSpacingStatus").then(
			// when we got something
			(item) => {
				let textSpacingStatus = [];
				if (item && item.textSpacingStatus) {
					textSpacingStatus = item.textSpacingStatus;
				}
				// Add or replace current tab's value
				textSpacingStatus[tabs[0].id] = {"status": strStatus};
				// And set it back to the storage
				let setting = browser.storage.local.set({ textSpacingStatus });
				setting.then(null, onError); // just in case
			}
		);
	});
}

Get status

function textSpacingOnload() {
	let getStatus = browser.storage.local.get("textSpacingStatus");
	getStatus.then(
		// when we got something
		(item) => {
			if (item && item.textSpacingStatus) {
				browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
					// If a setting is found for this tab
					if (item.textSpacingStatus[tabs[0].id]) {
                                          // Set switch button state to current setting's status
						btnTextspacing.setAttribute('aria-checked', item.textSpacingStatus[tabs[0].id].status);
					}
				});
			}
		},
		// we got nothing
		onError
	);
}
textSpacingOnload();

Clean statuses

Whenever you start your browser up again, or update a tab's location (to a new URL), settings' statuses need to be cleaned away.

That's what a main.js file in the background folder is meant for:

function unsetStatuses(tabId, changeInfo, tabInfo) {
    if (changeInfo.url) {
        let getTextSpacingStatus = browser.storage.local.get("textSpacingStatus");
        getTextSpacingStatus.then(
            (item) => {
                if (item && item.textSpacingStatus && item.textSpacingStatus[tabId]) {
					let textSpacingStatus = item.textSpacingStatus;
					textSpacingStatus[tabId] = {"status": false};
					let setting = browser.storage.local.set({ textSpacingStatus });
					setting.then(null, onError);
                }
            }
        );

        // Repeat this for each setting!
    }
}

browser.tabs.onUpdated.addListener(unsetStatuses);

function unsetStorages() {
	let clearStorage = browser.storage.local.clear();
	clearStorage.then(onCleared, onError);
}

browser.runtime.onStartup.addListener(unsetStorages);