Code Monkey home page Code Monkey logo

apertium-webext's Introduction

Apertium Web Extension

Apertium Web Extension is a Cross-Browser WebExtension Interface for the Apertium APy service. Apertium WebExt is capable of word translation, website translation as well as offering on-site word translation via use of hover-on gists. It relies entirely on the API service powered by Apertium.


Table of Contents


Installation

Chrome and Chromium

chrome-extension-select


  1. Navigate to chrome://extensions in your browser. You can also access this page by clicking on the Omnibox (three vertical dots), hovering over More Tools and selecting Extensions
  2. Check the box next to Developer Mode
  3. Click Load Unpacked Extension and select the apertium-webext/src/ directory
  4. Finally, Enable the plugin by checking the toggle

And you're done! you can use the extension to translate within the pop-up or hover on words as you like. For Additional Information, check the Getting Started with Extensions Page on Chrome Dev.


FireFox

firefox extension-select


  1. Navigate to about:debugging and select 'This FireFox'
  2. After clicking on "Load Temporary Add-on", select apertium-webext/src/manifest.json
  3. Yet another option with Firefox is to load the extension from about:addons which can be found in the browser omnibox as 'Addons and Themes'
  4. Zip the extension files by running zip -r apertium-webext src/ and pass the zip file to 'Load Extension from File' in the settings dialog

With that, you're done. For more detailed instructions, there's this MDN page.


Microsoft Edge

edge-extension-select


  1. Open edge://extensions by choosing the omnibox (three dots) at the top, and then selecting 'Extensions'
  2. Switch on Developer Mode at the bottom of the screen
  3. Select Load Unpacked and choose apertium-webext/src/


Refer to the Edge Documentation for additional details regarding installation.


Navigation

.
├── misc/...
├── src
│   ├── assets/...
│   ├── lib
│   │   ├── bootstrap.min.css
│   │   ├── jquery.min.js
│   │   ├── translate.js
│   │   └── storage.js
│   ├── background
│   │   └── background.html/js
│   ├── content
│   │   └── content.css/js
│   ├── popup
│   │   ├── options.html/js
│   │   └── popup.html/css/js
│   ├── settings
│   │   └── settings.html/css/js
│   └── manifest.json
├── tests
│   ├── popup.test.js
│   ├── options.test.js
│   ├── settings.test.js
│   └── README.md
└── README.md
  • lib/
    All library-ish files i.e. those that contain only function definitions which are called from multiple places. There's jQuery 3.6 and Bootstrap 5.0. storage.js is meant for all functions that deal with localStorage, and hover for hover-translation related stuff.

  • background/
    background.js contains all background scripts such as the ContextMenu option, the script to redirect the user to the settings page on being installed and so on.

  • content/
    Modifying the page DOM can only be done through content scripts. The scripts here are triggered on enabled sites and are the ones responsible for the word-hover and webpage translation functionality

  • popup/
    holds all the files necessary to build the pop-ups for the main pop-up and the smaller settings pop-up. Also has a local copy of bootstrap 5.

  • settings/
    files related to the main settings page with all options.

  • manifest.json
    The manifest for the extension, outlining background scripts, pop-up data and permissions.


Contribution

Initially completed as part of this GSoC Project, all further contributions are welcome.

apertium-webext's People

Contributors

overpowereddev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

apertium-webext's Issues

identifyLang good enough?

I actually don't know if APy's /identifyLang endpoint is good enough for texts in the wild. We should investigate that. Also, if there is a parent element with lang="" then that can presumably be trusted, saving a roundtrip.

Regardless, it may also be worth it to embed a local detection engine or rely on the browser's detector, to avoid hitting APy excessively. But that can be a late optimization.

GSoC Checklist

Loose tracking of desired features, sorted by easiest first:

  • Translating between an existing language pair in the extension pop-up
  • Translating a word or phrase that the user hovers on on a website
  • Display a hover-on gist for a word, without context
  • Translating an entire webpage at a time
  • Display a hover-on gist for a word, with context-based translation (requires alignment via word-bound blank)
  • Ability to switch between Release and Beta APy
  • ...maybe even 3rd party APy for those who have a local/secure installation

Target browsers:

  • Chrome
  • Edge
  • Firefox
  • Firefox Android
  • Safari (14+)

Migrate to Manifest V3

Manifests V2 and below will be completely unusable from January next year. I doubt this extension uses many chrome API's that are being changed, but there's some changes to be ade to the manifest anyways.

  • Naturally, changing the manifest version to "3"
  • Specify host permissions separately from other permissions
  • Action API unification (we don't have page actions anyways so just gotta rename)
  • replace all uses of executeScript(), sendRequest() and getSelected() with the new APIs
  • Change background pages to service workers (this might be a pain)

The whole list has a buncha stuff and I hopefully covered all of it

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.