Skip to content

Commit

Permalink
WebExtension support
Browse files Browse the repository at this point in the history
  • Loading branch information
@bb010g
bb010g committed Sep 29, 2017
1 parent 146f698 commit 7726e7d
Show file tree
Hide file tree
Showing 15 changed files with 77 additions and 499 deletions.
82 changes: 23 additions & 59 deletions Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
# - Bump version
# $ make
# - Upload Chrome addon
# - Sign XPI
# - Upload Firefox addon
# $ make www
# $ make sync
# - chmod 644
Expand All @@ -45,25 +45,21 @@ ADDON_DATA = \
build/bpm-resources.js build/emote-classes.css build/betterponymotes.js \
addon/bpmotes.css addon/combiners-nsfw.css addon/extracss-pure.css addon/extracss-webkit.css \
addon/bootstrap.css addon/options.html addon/options.css addon/options.js \
addon/pref-setup.js
addon/pref-setup.js addon/we-manifest.json

default: build/betterponymotes.xpi build/chrome.zip build/BPM.safariextension build/export.json.bz2 build/gif-animotes.css
default: build/webext.zip build/BPM.safariextension build/export.json.bz2

clean:
rm -fr build

www: web/* build/betterponymotes-*.mozsucks-*.xpi build/betterponymotes.update.rdf
www: web/*
cp web/firefox-logo.png www
cp web/chrome-logo.png www
cp web/safari-logo.png www
cp web/relay-logo.png www
cp web/ponymotes-logo.png www
sed "s/\/\*{{version}}\*\//$(VERSION)/" < web/index.html > www/index.html

rm -f www/*.xpi
cp build/betterponymotes-*.mozsucks-*.xpi www/betterponymotes.xpi
cp build/betterponymotes-*.mozsucks-*.xpi www/betterponymotes_$(VERSION).xpi

sync:
chmod 644 www/*
chmod 644 animotes/*
Expand All @@ -84,63 +80,31 @@ build/export.json.bz2: build/export.json
build/export.json: $(EMOTE_DATA)
./bpexport.py --json build/export.json

build/gif-animotes.css: $(EMOTE_DATA)
mkdir -p build
./dlanimotes.py

build/betterponymotes.xpi: $(ADDON_DATA) addon/fx-main.js addon/fx-install.rdf
mkdir -p build/firefox/data

sed "s/\/\*{{version}}\*\//$(VERSION)/" < addon/fx-package.json > build/firefox/package.json

cp addon/fx-main.js build/firefox/index.js

cp build/betterponymotes.js build/firefox/data
cp build/bpm-resources.js build/firefox/data
cp build/bpm-resources.js build/firefox
cp build/emote-classes.css build/firefox/data

cp addon/bootstrap.css build/firefox/data
cp addon/bpmotes.css build/firefox/data
cp addon/combiners-nsfw.css build/firefox/data
cp addon/extracss-pure.css build/firefox/data
cp addon/extracss-webkit.css build/firefox/data
cp addon/options.css build/firefox/data
cp addon/options.html build/firefox/data
cp addon/options.js build/firefox/data
cp addon/pref-setup.js build/firefox

cd build/firefox && ../../node_modules/.bin/jpm xpi
./mungexpi.py $(VERSION) addon/fx-install.rdf build/firefox/*.xpi build/betterponymotes.xpi

build/betterponymotes.update.rdf: build/betterponymotes-*.mozsucks-*.xpi
uhura -k betterponymotes.pem build/betterponymotes-*.mozsucks-*.xpi https://ponymotes.net/bpm/betterponymotes_$(VERSION).xpi > build/betterponymotes.update.rdf

build/chrome.zip: $(ADDON_DATA) addon/cr-background.html addon/cr-background.js
mkdir -p build/chrome
build/webext.zip: $(ADDON_DATA) addon/we-background.html addon/we-background.js
mkdir -p build/webext

sed "s/\/\*{{version}}\*\//$(VERSION)/" < addon/cr-manifest.json > build/chrome/manifest.json
sed "s/\/\*{{version}}\*\//$(VERSION)/" < addon/we-manifest.json > build/webext/manifest.json

cp addon/cr-background.html build/chrome/background.html
cp addon/cr-background.js build/chrome/background.js
cp addon/we-background.html build/webext/background.html
cp addon/we-background.js build/webext/background.js

cp build/betterponymotes.js build/chrome
cp build/bpm-resources.js build/chrome
cp build/emote-classes.css build/chrome
cp build/betterponymotes.js build/webext
cp build/bpm-resources.js build/webext
cp build/emote-classes.css build/webext

cp addon/bootstrap.css build/chrome
cp addon/bpmotes.css build/chrome
cp addon/combiners-nsfw.css build/chrome
cp addon/extracss-pure.css build/chrome
cp addon/extracss-webkit.css build/chrome
cp addon/options.css build/chrome
cp addon/options.html build/chrome
cp addon/options.js build/chrome
cp addon/pref-setup.js build/chrome
cp addon/bootstrap.css build/webext
cp addon/bpmotes.css build/webext
cp addon/combiners-nsfw.css build/webext
cp addon/extracss-pure.css build/webext
cp addon/extracss-webkit.css build/webext
cp addon/options.css build/webext
cp addon/options.html build/webext
cp addon/options.js build/webext
cp addon/pref-setup.js build/webext

cp betterponymotes.pem build/chrome/key.pem
cp betterponymotes.pem build/webext/key.pem
# Uncompressed due to prior difficulties with the webstore
cd build/chrome && zip -0 ../chrome.zip *
cd build/webext && zip -0 ../webext.zip *

build/BPM.safariextension: $(ADDON_DATA) addon/sf-Settings.plist addon/sf-background.html addon/sf-background.js
mkdir -p build/BPM.safariextension
Expand Down
48 changes: 8 additions & 40 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ the backend (mostly Python) and JS that runs in the browser.
First off, there are some files and directories that aren't in the git repo but
need to exist.

animotes/
betterponymotes.pem

The PEM file is a private, unencrypted RSA key. It looks like this:
Expand Down Expand Up @@ -48,24 +47,8 @@ You'll also need the following tools:
on your PATH. If you don't already have it, it can probably be installed using
your system's package manager. (E.g. `sudo apt-get install zip` on Ubuntu)

- The Firefox Addon SDK. It comes in a zip file with a `bin/activate` shell
script. Source it to add its `bin/` to your `$PATH`, because you need the
`cfx` tool.

- `uhura`. It's a little perl script used to sign the Firefox XPI's. It needs
to be on $PATH. I'm not sure exactly where I got it, and installing it is
a pain, since it depends on some CPAN modules. I forget which.

- `apng2gif`. A tool to convert APNG files to GIF format. Needs to be on your
PATH in order to build BPM.


## Repository Structure

# Animote support
animotes/ Converted GIF cache (not kept in repo due to size)
dlanimotes.py Script to maintain animotes/ and build/gif-animotes.css

# Scripts and code
shell.py All-around emote update tool. Handles downloading
new stylesheets.
Expand All @@ -92,9 +75,6 @@ You'll also need the following tools:
web/ Most actual site files.
index.html Main page.
www/ A complete copy of the site. Synced to ponymotes.net
betterponymotes.update.rdf
Firefox update manifest file.
*.xpi Hosted addon files.

# Addon directories
addon/ All common code and static data files (CSS).
Expand All @@ -111,11 +91,9 @@ You'll also need the following tools:
options.js Options page code.
options.css Options page CSS.
bootstrap.css Bootstrap. Used on the options page.
cr-background.html Chrome background page. Holds prefs and things for the addon.
cr-background.js Chrome background code.
cr-manifest.json Chrome addon manifest.
fx-main.js Firefox backend script.
fx-package.json Firefox addon manifest.
we-background.html WebExtension background page. Holds prefs and things for the addon.
we-background.js WebExtension background code.
we-manifest.json WebExtension addon manifest.

# Data files
data/ Misc data files you need to maintain.
Expand Down Expand Up @@ -149,10 +127,9 @@ runs on its own, and content scripts that run in the pages. The former must
obviously be written to the specific browser, but the latter is largely
independent except where it has to communicate with the backend.

Firefox's background script is `addon/fx-main.js`. Chrome has
`addon/cr-background.html`, and Safari has `addon/sf-background.html`. As these
scripts share a large amount of functionality, most of that is now held in
`addon/pref-setup.js`.
Firefox & Chrome's background script is `addon/we-main.js`. Safari has
`addon/sf-background.html`. As these scripts share a large amount of
functionality, most of that is now held in `addon/pref-setup.js`.

The backend is chiefly responsible for storing and managing preferences,
applying the necessary files to pages (JS and CSS), and maintaining the custom
Expand Down Expand Up @@ -244,15 +221,6 @@ classes of mistakes. Some warnings are known oddities that the script isn't
capable of recognizing; ignore those.


## APNG -> GIF Conversion

Assuming all animotes are tagged with +animote, run `./dlanimotes.py` to
download and convert all of them. This process requires `apng2gif` to be on
`$PATH`, and it will spit out GIFs to `animotes/`, which must be uploaded to the
host site. It also generates `build/gif-animotes.css`, which is the override
sheet used by Chrome.


## Updates and Version Numbers

After updating the CSS and tags, run `shell.py commit` to record it all, and
Expand All @@ -279,8 +247,8 @@ When everything is updated, running `make` is sufficient to rebuild all packages
To release BPM:

1. Run `make` to rebuild all packages.
2. Upload `build/chrome.zip` to the Chrome webstore.
3. Upload `build/betterponymotes.xpi` to addons.mozilla.org for package signing.
2. Upload `build/webext.zip` to the Chrome webstore.
3. Upload `build/webext.zip` to addons.mozilla.org for package signing.
Download the output file to `build/`.
4. Run `make www` to rebuild the website.
5. Run `make sync` to synchronize with `ponymotes.net`, including the Firefox
Expand Down
60 changes: 8 additions & 52 deletions addon/bpm-browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,64 +97,20 @@ var make_css_link = null;
var linkify_options = null;

switch(platform) {
case "firefox-ext":
case "webext":
_send_message = function(method, data) {
if(data === undefined) {
data = {};
}
data.method = method;
log_debug("_send_message:", data);
self.postMessage(data);
};

var _data_url = function(filename) {
// FIXME: Hardcoding this sucks. It's likely to continue working for
// a good long while, but we should prefer make a request to the
// backend for the prefix (not wanting to do that is the reason for
// hardcoding it). Ideally self.data.url() would be accessible to
// content scripts, but it's not...
return "resource://jid1-thrhdjxskvsicw-at-jetpack/data" + filename;
};

make_css_link = function(filename, callback) {
var tag = stylesheet_link(_data_url(filename));
callback(tag);
};

linkify_options = function(element) {
// Firefox doesn't permit linking to resource:// links or something
// equivalent.
element.addEventListener("click", catch_errors(function(event) {
_send_message("open_options");
}), false);
};

self.on("message", catch_errors(function(message) {
switch(message.method) {
case "initdata":
_complete_setup(message);
break;

default:
log_error("Unknown request from Firefox background script: '" + message.method + "'");
break;
}
}));
break;

case "chrome-ext":
_send_message = function(method, data) {
if(data === undefined) {
data = {};
}
data.method = method;
log_debug("_send_message:", data);
chrome.extension.sendMessage(data, _message_handler);
log_debug("_send_message:", JSON.stringify(data));
chrome.runtime.sendMessage(data, _message_handler);
};

var _message_handler = catch_errors(function(message) {
log_debug("_message_handler:", JSON.stringify(message));
if(!message || !message.method) {
log_error("Unknown request from Chrome background script: '" + message + "'");
log_error("Unknown request from WebExt background script: '" + message + "'");
return;
}

Expand All @@ -164,18 +120,18 @@ case "chrome-ext":
break;

default:
log_error("Unknown request from Chrome background script: '" + message.method + "'");
log_error("Unknown request method from WebExt background script: '" + message.method + "'");
break;
}
});

make_css_link = function(filename, callback) {
var tag = stylesheet_link(chrome.extension.getURL(filename));
var tag = stylesheet_link(chrome.runtime.getURL(filename));
callback(tag);
};

linkify_options = function(element) {
element.href = chrome.extension.getURL("/options.html");
element.href = chrome.runtime.getURL("/options.html");
element.target = "_blank";
};
break;
Expand Down
4 changes: 2 additions & 2 deletions addon/bpm-inject.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function message_iframe(frame, message) {
// Right now, only Firefox and Opera let us access this API.
frame.contentWindow.postMessage(message, "*");
} else {
// Chrome and Opera don't permit *any* access to these variables for
// WebExt and Opera don't permit *any* access to these variables for
// some stupid reason, despite them being available on the page.
// Inject a <script> tag that does the dirty work for us.
var id = "__betterponymotes_esh_" + random_id();
Expand Down Expand Up @@ -78,7 +78,7 @@ function track_focus() {
// Focus is within the frame. Find the real element (recursing just
// in case).
if(active.contentWindow === null || active.contentWindow === undefined) {
// Chrome is broken and does not permit us to access these
// WebExt is broken and does not permit us to access these
// from content scripts.
message_iframe(active, {
"__betterponymotes_method": "__bpm_track_focus"
Expand Down
45 changes: 3 additions & 42 deletions addon/bpm-main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
*/
function init_css(store) {
// Most environments permit us to create <link> tags before DOMContentLoaded
// (though Chrome forces us to use documentElement). Scriptish is one that
// (though WebExt forces us to use documentElement). Scriptish is one that
// does not- there's no clear way to manipulate the partial DOM, so we delay.
// TODO We don't support Scriptish anymore.
with_css_parent(function() {
log_info("Setting up css");
link_css("/bpmotes.css");
Expand Down Expand Up @@ -32,7 +33,7 @@ function init_css(store) {
}
}

if(platform === "chrome-ext") {
if(platform === "webext") {
// Fix for Chrome, which sometimes doesn't rerender unknown emote
// elements. The result is that until the element is "nudged" in
// some way- merely viewing it in the Console/platform Elements
Expand All @@ -49,46 +50,6 @@ function init_css(store) {

add_css(store.custom_css);
});

with_dom(function() {
// Inject our filter SVG for Firefox. Chrome renders this thing as a
// massive box, but "display: none" (or putting it in <head>) makes
// Firefox hide all of the emotes we apply the filter to- as if *they*
// had display:none. Furthermore, "height:0;width:0" isn't quite enough
// either, as margins or something make the body move down a fair bit
// (leaving a white gap). "position:fixed" is a workaround for that.
//
// We also can't include either the SVG or the CSS as a normal resource
// because Firefox throws security errors. No idea why.
//
// Can't do this before the DOM is built, because we use document.body
// by necessity.
//
// Christ. I hope people use the fuck out of -i after this nonsense.
if(platform === "firefox-ext") {
var svg_src = [
'<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"',
' style="height: 0; width: 0; position: fixed">',
' <filter id="bpm-darkle">',
' <feColorMatrix in="SourceGraphic" type="hueRotate" values="180"/>',
' </filter>',
' <filter id="bpm-invert">',
' <feColorMatrix in="SourceGraphic" type="matrix" values="',
' -1 0 0 0 1',
' 0 -1 0 0 1',
' 0 0 -1 0 1',
' 0 0 0 1 0"/>',
' </filter>',
'</svg>'
].join("\n");
var div = document.createElement("div");
div[IHTML] = svg_src;
document.body.insertBefore(div.firstChild, document.body.firstChild);

add_css(".bpflag-i { filter: url(#bpm-darkle); }" +
".bpflag-invert { filter: url(#bpm-invert); }");
}
});
}

function main() {
Expand Down
Loading

0 comments on commit 7726e7d

Please sign in to comment.