| Age | Commit message (Collapse) | Author |
|---|
|
|
|
|
|
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.
|
|
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.
|
|
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
|
|
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.
|
