Saladict 沙拉查词

Chrome/Firefox WebExtension. Feature-rich inline translator with PDF support. Vimium compatible.

【中文】Chrome/Firefox 浏览器插件，网页划词翻译。

Downloads

Chrome Web Store / Firefox Add-ons / Github Release

Saladict 6 is a complete rewrite in React Typescript for both Chrome & Firefox. Built for speed, stability and customization.

CHANGELOG。

More screenshots:

Development

Clone the repo and run yarn install.

UI Tweaking

yarn start --main=[entry id] to view a certain entry with WDS in a fake WebExtension environment.

Testing

yarn test to run Jest.

Toggle:

• --coverage: Show coverage instead of watching.

Building

yarn devbuild to start a quick build without compression.

yarn build to start a full build.

Toggle:

• --notypecheck: Skip TypeScript full check.
• --analyze: Show detailed Webpack bundle analyzer.

Releasing

yarn release to bump version and generate CHANGELOG.

How to add a dictionary

1. Register the dictionary in app config so that TypeScript generates the correct typings. Dict ID should follow alphabetical order.
2. Create a directory at src/components/dictionaries/, with the name of the dict ID.
3. Use Bing as guidance. Copy the files to the new directory.
4. Replace the favicon with a new 32x32 png.
5. Update _locales.json with the new dictionary name. Add locales for options, if any.
6. engine.ts exports a search function which is responsible for fetching, parsing and returning dictionary results. See the typings for more detail.
   • If the dictionary supports pronunciation:
     1. Register the ID at config.autopron.
     2. Include an audio field in the object which search engine returns.
7. Search result will ultimately be passed to a React PureComponent in View.tsx, which renders the result accordingly.
8. Scope the styles in _style.scss following ECSS-ish naming convention.

Add Testing

1. Add response samples at test/specs/components/dictionaries/[dictID]/response.
2. Add engine.spec.ts to test the engine.

Develop the dictionary UI live

1. Intercept ajax calls in config/fake-env/fake-ajax.js. Use the testing response samples.
2. Edit src/components/__fake__/index.tsx.
3. Run yarn start --main=components.