diff options
| author | Teddy Wing | 2018-10-05 16:33:01 +0200 |
|---|---|---|
| committer | Teddy Wing | 2018-10-05 16:33:01 +0200 |
| commit | 4792514bbcf4aa0c1b102a3afc25c8c0ae4636b5 (patch) | |
| tree | 9bcbb467d2f119b7d51a408faaaa8495a626bb9b | |
| parent | d6af5af47db7690bfbec476f0f2944cd0b204f07 (diff) | |
| download | Legibility-4792514bbcf4aa0c1b102a3afc25c8c0ae4636b5.tar.bz2 | |
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.
| -rw-r--r-- | background.js | 7 | ||||
| -rw-r--r-- | manifest.json | 1 |
2 files changed, 7 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' } + ); + }); }); diff --git a/manifest.json b/manifest.json index 1a3553b..cbc5413 100644 --- a/manifest.json +++ b/manifest.json @@ -26,6 +26,7 @@ "permissions": [ "activeTab", + "webNavigation", "http://*/*", "https://*/*" ] |