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.

5 files changed, 32 insertions, 1 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' });
+});
diff --git a/content.js b/content.js
new file mode 100644
index 0000000..bf355f2
--- /dev/null
+++ b/content.js
@@ -0,0 +1,7 @@
+var browser;
+
+if (chrome) {
+	browser = chrome;
+}
+
+browser.runtime.sendMessage({ url: 'tmp' });
diff --git a/css/.keep b/css/.keep
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/css/.keep
diff --git a/css/example.com.css b/css/example.com.css
new file mode 100644
index 0000000..d7162ed
--- /dev/null
+++ b/css/example.com.css
@@ -0,0 +1,3 @@
+article p {
+	font-size: 22px !important;
+}
diff --git a/manifest.json b/manifest.json
index fae4553..a744fb5 100644
--- a/manifest.json
+++ b/manifest.json
@@ -4,11 +4,23 @@
 	"description": "Apply custom CSS to web pages.",
 	"version": "0.0.1",
 
+	"content_scripts": [
+		{
+			"matches": [
+				"http://*/*",
+				"https://*/*"
+			],
+			"js": ["content.js"]
+		}
+	],
+
 	"background": {
 		"scripts": ["background.js"]
 	},
 
 	"permissions": [
-		"activeTab"
+		"activeTab",
+		"http://*/*",
+		"https://*/*"
 	]
 }