Apply CSS styles to a website

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.

1 files changed, 9 insertions, 0 deletions

diff --git a/background.js b/background.js
new file mode 100644
index 0000000..44a5c2a
--- /dev/null
+++ b/background.js
@@ -0,0 +1,9 @@
+var browser;
+
+if (chrome) {
+	browser = chrome;
+}
+
+browser.runtime.onMessage.addListener(function() {
+	browser.tabs.insertCSS({ file: '/css/example.com.css' });
+});