GithubHelp home page GithubHelp logo

amndeep7 / ptw-extender Goto Github PK

View Code? Open in Web Editor NEW
10.0 2.0 0.0 2.82 MB

Extension that adds titles to your MyAnimeList, AniList, or Kitsu plan-to-watch/read list with the url of where you found the title added as a comment.

License: Other

JavaScript 85.41% Shell 2.15% CSS 1.01% HTML 11.44%
javascript anime manga myanimelist anilist kitsu webextensions

ptw-extender's Introduction

PTW Extender Icon

PTW Extender

Add-on/Extension Repository/Store
Firefox
Chrome

A WebExtension that makes adding titles to one's MyAnimeList, AniList, or Kitsu plan-to-watch list easier by automating the process: all you have to do is select the extension from the context menu list when you right-click a link to one of the list sites. Moreover, it adds the current datetime and the URL of the tab you found the link into the comments section for that title's list entry so that you can refer back to why you added it to the list in the first place.

MAL

As of the writing of this README, MAL doesn't have an external API so the extension is forced to take you to the edit details page for that title where it changes settings as appropriate (status to ptw if it wasn't already completed, comments with the URL added, etc.). By default it just leaves you there, but if you select the appropriate options in the options page, it'll automatically submit the changes and even close the tab. NOTE: You need to already be logged into MAL in order for this extension to work since, as of the writing of this README, there is no way to access and modify a user's data without the add-on storing your MAL credentials (i.e. your username and password in plain-text) due to the aforementioned lack of API.

AniList and Kitsu

AniList and Kitsu DO have external APIs, so the extension just makes the appropriate requests to (if necessary) add it to your list and change the appropriate settings (ex. having the title be private to just the authenticated user).

Why?

My problem is that I'd keep finding gifs or pics or watch-this posts or nostalgia threads or random recommendations or ... of anime and manga that'd make me want to add them to my ptw list; however, I'd either put it on there without putting up a source, which would eventually result in me wondering why that show was on there in the first place, or I would just save the source without going to the bother of adding it to the list. All in all, this resulted in a mildly frustrating experience when trying to keep track of WHICH title I wanted to consume and WHY I wanted to do so.

The Problem

Having gotten tired of this, I decided to make an extension that would automate the process sufficiently enough that it'd be easy to go through that process, resulting in sourced anime and manga being added to my plan-to-watch list... where they'll stay and rot forever.

The Solution


Building the extension

System dev-dependencies

  • Inkscape - Cmdline tool to convert icon.svg into a set of resized PNG files
  • Node/npm - Javascript package manager
  • Unix-like operating system - The build script at least assumes you got bash
  • web-ext - Mozilla's script for "compiling" extensions

Build process

Run build to install dependencies locally, move over libraries, generate the icons, and "compile" this readme.

Run web-ext build to generate the extension artifact. It's just a zip file, but before uploading it anywhere, you can get rid of the pictures directory if you want since that'll just bloat the artifact with stuff that's useless for the end-user.


Permissions Explanation

A detailed explanation for why PTW Extender asks for these permissions.

As of the time of writing, MAL doesn't have an API, so in order to access, scrape, and modify the add/edit page, PTW Extender need permissions to view it.

contextMenus

The way the extension is used is to right-click a link and then select PTW Extender's context menu button in order to add a title to your PTW list.

identity

In order to log into a site securely, PTW Extender needs to follow the OAuth flow, which starts with a window popping up asking for your credentials to AniList, but in order to make that window pop up, PTW Extender needs to call a function defined here.

notifications

This is less relevant for the default settings for MAL since you have to manually click submit and can see if the update went through or not, but if you tweak the options or use an AniList or Kitsu link, then you don't get that visual confirmation, so notifications come in to fill that gap. If you don't like them, they can be turned off in the options.

storage

Need access to storage in order to save your settings for PTW Extender. It also stores your accessToken for AniList and Kitsu so you aren't forced to log in every time you restart the browser.

tabs

Need access to grab the url of the current page you're on in order to add it to the comments block of whatever title you're adding to your PTW list. Moreover, it's necessary in order to open the add/edit pages for titles in MAL (see above).

webNavigation

If you're using MAL and have tweaked the appropriate options, you can first and foremost autosubmit the changes PTW Extender makes to that entry, and then also tell it to take certain actions post autosubmit. However, in order to know when the submission process has completed requires knowing when the page has finished redirecting to MAL's "you've updated the entry" page, which is where this permission comes in.

ptw-extender's People

Contributors

amndeep7 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

ptw-extender's Issues

Save webpage to localstorage

Possible alternative to saving urls would be to save the webpage to local storage and then have links to view that saved into the notes section

expansion idea

Prettify pasted links

Figure out a way to make it so that <a>links</a> are clickable - maybe paste urls in a special way such that it's identifiable from anything else that might be in there and then split it into its own special row or something

Context menu doesn't show up

Supposedly the browser.runtime.OnInstalled listener wrapper should have been sufficient to make sure that the context menu always shows up, but that was not the case for some reason (FF on Win10). Reinstalling the add-on made it work fine, which makes sense cause it'll definitely hit the oninstalled event then, but apparently there might be some event that happens where the browser starts up without this event having fired so the context menu never gets loaded in. I'll just buck what appears to be the supposedly accepted practice of having that wrapper and instead just on every load of the extension, I'll make it so that all the contextmenus get removed and then I add in my little guy again.

Example of best practice that doesn't always work out :(

Example of hackier practice that I think will be more consistent at the expense of a few cpu cycles on the part of the user.

Images

I worked my butt off designing and making this new icon, but it still looks terrible, especially at the 16x16 size. Need to come up with a new one that scales well to small sizes and doesn't violate trademarks haha.

Internationalization

I'm pretty mono-literate, and I think this extension being English only is fine considering that western anime fans (who are the primary people I'm capable of marketing this to) usually learn/pick up at least moderate English. However, if there's support for adding internationalization then I don't mind going through the hassle, but whoever's asking for it is gonna have to help me come up with the strings.

Testing

Figure out how to test extensions

Build

Have an actual build process instead of a shell script

put options version into default options

when a new options version is released, everything should be moved over to it anyways

i believe default options is called every time before any options are accessed/modified (or at least it can be), so just keep that data there instead of having to perpetually redefine it

Button

Add that toolbar button in order to have it pop up with any errors instead of silently failing

Search

Add search capability so you don't need a direct link - dependent on #8 to have a place to show those results

Permissions explanation

Come up with list of permissions used and reasoning why to put into readme and blurbs for the stores

Display options page oninstall/update

So that way people see it - can also add a little bit to be like "thanks for using the extension, can find out more by looking at github, leave a review, etc" and then have the changelog + permissions explanation pasted on the side

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.