Fix CSS not loading in background tabs

When opening tabs in the background, for example when clicking links,
custom CSS wouldn't get properly loaded in those tabs.

It turns out that the CSS was actually getting loaded into the current
tab, which I hadn't realised.

Thanks to Niklas Gollenstede's answer here for clueing me into this:
https://discourse.mozilla.org/t/inject-css-with-webextension/16877/3

To fix the problem, we specify the `tabId` in which to load the CSS. We
get the `tabId` from the `webNavigation.onCompleted` event, which tells
us the page is basically ready.

1 files changed, 6 insertions, 1 deletions

diff --git a/background.js b/background.js
index 57a2870..7510556 100644
--- a/background.js
+++ b/background.js
@@ -22,5 +22,10 @@ if (chrome) {
 }
 
 browser.runtime.onMessage.addListener(function(message) {
-	browser.tabs.insertCSS({ file: '/css/' + message.domain + '.css' });
+	browser.webNavigation.onCompleted.addListener(function(details) {
+		browser.tabs.insertCSS(
+			details.tabId,
+			{ file: '/css/' + message.domain + '.css' }
+		);
+	});
 });