LazyCats-dev / ao3-podfic-posting-helper

Import metadata when posting a new work
https://lazycats.dev?utm_source=github&utm_medium=web&utm_campaign=about
GNU General Public License v3.0
7 stars 2 forks source link
ao3 archive-of-our-own chrome-extension edge-extension fanfic fanfiction firefox-addon podfic

AO3 Podfic Posting Helper

CircleCI

Logo: A platypus holding a microphone in front of the letters AO3

When you post a new work, this extension can help you by importing metadata such as tags and rating to match the work that inspired you.

This is an unofficial extension and not supported by AO3. Please do not raise issues with this extension to AO3 support.

Available on the Chrome Web Store

Available as a Firefox Add-on

Available as a Microsoft Edge Extension

You can configure it to:

A popup over the new work page, showing the options available to configure importing metadata

If the default set of title transformations isn't enough, you can configure a custom format on the options page. "\${title}" will be replaced with the original title and "\${authors}" with the original authors.

For example, if the original work is called "Super awesome title" and is by "author1" and "author2":

An options page where you can configure a custom title transformation

If the default set of summary transformations isn't enough, you can configure a custom format on the options page. The following replacements will be made:

An options page where you can configure a custom summary transformation

You can also configure a custom default body for your work, instead of a default which demonstrates how to embed audio, images, or links.

An options page where you can configure the default body of your new work

Documentation

A lot of the basic structure of this app (popup page/option page/background loader) was built directly on the Chrome extension getting started tutorial.

popup.js

The core importing logic that gets the metadata from the original work, and the filling logic, to enter it into AO3's new work form. There's also some logic here to save pop-up options when a user hits import, so that they'll be the same next time.

Storing options

The only way to pass information between the form fields in the pop-up and the injected html that fills in the "new work" form is to write it to storage and then read it back. That's what the browser.storage.sync.set/get calls do.

Code design

The pop-up and options page are built using Material Design Components for Web. We are using the web components without a framework and with barebones CSS. The JS and CSS files for the components were downloaded from CDN and are packed in source here. We didn't set up any kind of package management with Node or any bundling with tools like Webpack on account of these being more effort than we were willing to invest right now. Code is organized as ES6 modules where possible.