| Age | Commit message (Collapse) | Author |
|---|
|
The keyboard shortcut for reloading the extension causes the extension
to fail to load in Chrome. That happens because the default shortcut
uses the Control and Option modifiers together:
> Key combinations that involve Ctrl+Alt are not permitted in order to
> avoid conflicts with the AltGr key.
https://developer.chrome.com/docs/extensions/reference/commands/#key-combinations
Provide a way to remove the keyboard shortcuts from the manifest for
Chrome. The shortcuts aren't necessary in Chrome, as new CSS files and
changes to existing ones are automatically recognised without having to
reload the extension. On Firefox, the extension must be manually
reloaded in order for CSS changes to take effect.
|
|
|
|
|
|
|
|
|
|
We already request permission on all `http://` and `https://` hosts.
That should give us all the permission we need. The `activeTab`
permission just seems redundant. It's probably a holdover that no longer
applies.
|
|
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.
|
|
|
|
Firefox has been my primary browser for several years now.
|
|
|
|
|
|
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.
|
|
Forgot this when I wrote the instructions. I usually like to prefix
shell commands with a prompt character.
|
|
|
|
Includes instructions for Chrome and Firefox. Firefox is a little more
involved. For now not bothering to sign the extension.
Also update `manifest.json` to give the extension an add-on ID. This is
required as it must be used as the directory name in the Firefox
`extensions/` profile folder.
Thanks to these resources for explaining how to install an unpacked
extension in Firefox:
- https://stackoverflow.com/questions/27155766/how-to-install-unpacked-extension-in-firefox-chrome/27158189#27158189
- https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Setting_up_extension_development_environment#Firefox_extension_proxy_file
- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Sideloading_add-ons
- https://stackoverflow.com/questions/37728865/install-webextensions-on-firefox-from-the-command-line/37739112#37739112
|
|
Add an example to show how the extension works.
|
|
Write a description of the web extension. Start on installation
instructions.
|
|
Include the subdomain when matching filenames. This is less general, but
allows us to match more precisely. I needed to modify CSS on a
`subdomain.github.io` blog, and of course we don't want to modify _all_
`github.io` styles.
|
|
|
|
Ignore contents of the `/css/` directory, but don't ignore `.keep`
files, to allow the directory to remain tracked in the repo.
|
|
Remove this test file.
|
|
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.
|
|
A basic WebExtension manifest file.
|
