Skip to content
This repository has been archived by the owner on Feb 2, 2023. It is now read-only.

Latest commit

 

History

History
172 lines (135 loc) · 6.98 KB

README.md

File metadata and controls

172 lines (135 loc) · 6.98 KB
Raw

Project Board | Community Site | #openverse @ Slack | Handbook | Releases mockups | Design Library

Openverse Browser Extension

Chrome | Firefox | Opera | Edge

A cross-browser extension that lets you search, filter, and use openly-licensed images.

MIT License prs welcome

Features

Please visit the homepage to preview a few features in action.

Feature Firefox Chrome Opera Edge
Search and filter CC Licensed images. Yes Yes Yes Yes
One click easy attribution. Yes Yes Yes Yes
Image tags and recommendations. Yes Yes Yes Yes
Download images (and attribution). Yes Yes Yes Yes
Bookmark images. Yes Yes Yes Yes
Export and import bookmarks. Yes Yes Yes Yes
Options page for custom settings. Yes Yes Yes Yes
Sync your custom setting and bookmarks across devices. Yes Yes No Yes
Dark Mode. Yes Yes Yes Yes

Installation from source

You can install the extension directly from the source. Follow the following steps:

  1. Clone the repository
git clone https://github.com/WordPress/openverse-browser-extension.git
  1. Install project dependencies
npm install
  1. Run the following command to compile SASS to CSS and bundle JS. The compiled files will be in dist folder.
npm run build

Note: If you want to install the extension for development, you should run npm run dev.

Troubleshooting build failures

  1. If you get the following error:
'TARGET' is not recognized as an internal or external command

then most likely webpack-cli is not installed on your dev machine.

  • Here are the few things you can try:

    • Try deleting the folder node_modules and reinstalling webpack-cli.
      npm install --save-dev webpack-cli
    • If reinstalling node modules does not solve the issue, run the following to install webpack-cli globally.
    npm install -g webpack-cli

Loading the extension in the browser

  • Mozilla Firefox
    • Navigate to about:debugging.
    • Click on "Load Temporary Add-on" button.
    • From the file explorer, choose openverse-browser-extension/dist/firefox/manifest.json.
  • Google Chrome
    • Navigate to chrome://extensions.
    • Click on "Load Unpacked" button (make sure you have enabled the Developer mode).
    • From the file explorer, choose openverse-browser-extension/dist/chrome.
  • Opera
    • Navigate to about://extensions.
    • Click on "Load Unpacked" button (make sure you have enabled the Developer mode).
    • From the file explorer, choose openverse-browser-extension/dist/opera.
  • Edge
    • Navigate to edge://extensions.
    • Click on "Load Unpacked" button (make sure you have enabled the Developer mode).
    • From the file explorer, choose openverse-browser-extension/dist/edge.

Contribution

Checkout CONTRIBUTING.md for general guidelines for contributing code to the project.

For contribution guidelines and development instructions specific to this particular project, please checkout INSTRUCTIONS.md.

Debugging in Development Mode

Mozilla Firefox

  • Navigate to about:debugging and from sidebar select This Firefox.
  • Click on "Load Temporary Add-on" button.

  • From the file explorer, choose openverse-browser-extension/dist/firefox/manifest.json.
  • You will be now able to see Openverse browser extension. Now click on the Inspect button.

  • A new tab will open with Firefox debugger. Now first, click on the three dots and select "Disable Popup Auto-Hide".

  • Now click on the browser extension from top right corner and the developer tools will be loaded with the content to debug.

Google Chrome, Opera, Microsoft Edge

After you have loaded the extension, follow these steps.

  • Right-click in extension area and select "Inspect element".

  • The developer tools will now open loaded with the content to debug.

License

See LICENSE.