| Age | Commit message (Collapse) | Author |
|---|
|
On Firefox, when adding or modifying CSS files, the changes aren't
applied on a page refresh. Instead, they're applied when the extension
is reloaded. Provide a keyboard shortcut to enable quick reloads, rather
than having to open `about:addons` and toggle the extension off and on.
|
|
This variable is already declared at the top of the loop. We don't need
to redeclare it in the if/else branches.
|
|
|
|
The '*' character is not ideal to use in filenames because if you forget
to escape it in the shell, it can have harmful consequences.
|
|
|
|
For the hostname "en.wikipedia.org", all of the following CSS files are
inserted:
* `*.css`
* `*.org.css`
* `*.wikipedia.org.css`
* `en.wikipedia.org.css`
|
|
|
|
|
|
This will give us a list of filenames that we should look for to insert
CSS on the page.
|
|
That commit incorrectly caused a bunch (if not all) custom stylesheets
to be inserted for the wrong domains.
Add a condition to ensure that the domain of the `tabId` used matches
that of the stylesheet.
|
|
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.
|
|
|
|
Load a CSS file based on the current page's domain (e.g. "example.com").
Use:
https://stackoverflow.com/questions/13367376/get-the-domain-name-of-the-subdomain-javascript/13367604#13367604
to give us the hostname without any subdomains. This will apply the CSS
to all subdomains on the site. Not sure if this what we want yet, but it
seemed simpler to consolidate like this now rather than splitting CSS by
each subdomain or adding some kind of complicated matching/wildcard
logic.
Errors are ignored and just happen if the file for the current domain
doesn't exist. This seems okay to me to leave errors unhandled, as there
doesn't appear to be a clean way to handle them, and even if there was,
we'd just be either ignoring them anyway or conditionally executing
`insertCSS()`, which seems unnecessary.
|
|
A minimal prototype.
manifest.json:
* Include new content script
* Ask permissions for all HTTP and HTTPS site
css/.keep:
This directory will be "empty" in the release version. Add a dummy file
to ensure the directory appears in version control to make it clear
that's where user stylesheet files should go.
css/example.com.css:
Sample CSS file to see that styles are getting applied correctly.
background.js:
Load the `example.com.css` file into the current tab's web page. It does
this on a message from a content script. We do this because this file
only gets executed once and we can't call `browser.tabs.insertCSS()` in
the content script. While we could add the stylesheet directly in the
content script, it seemed to me that it would be simpler to call
`insertCSS()` instead of, say, adding a `<style>` tag etc.
content.js:
Sent a message to the background script to insert CSS. Just using a
dummy message for now. In the future, this will be replaced with the
domain of the current page, which will be matched against the CSS
filename.
Additionally, we assign `browser` to `chrome` because stupidly, Chrome
doesn't expose its `chrome` objects as `browser` as in the WebExtensions
standard. Normally this should work in Firefox too, but I haven't tested
it yet. My guess is that I'll probably need to change the:
var browser;
line to
var browser = browser;
But we'll see when we start testing that.
|
