Project Transferred
This project was transfered to WordPress:
- WordPress/openverse-browser-extension: A cross-browser extension that lets you search, filter, and use openly-licensed images.
For additional context see:
- 2020-12-07: Upcoming Changes to the CC Open Source Community — Creative Commons Open Source
- 2021-05-03: CC Search to Join WordPress - Creative Commons
- 2021-05-10: Welcome to Openverse – Openverse — WordPress.org
- 2021-12-13: Dear Users of CC Search, Welcome to Openverse - Creative Commons
CC Search Browser Extension
Chrome | Firefox | Opera | Edge
A Cross-Browser extension that lets you search, filter, and use images in the public domain and under Creative Commons licenses.
Features
Please visit https://opensource.creativecommons.org/ccsearch-browser-extension/ to preview a few features in action.
Installation from source
You can install the extension directly from the source. Follow the following steps:
- Clone the repository
git clone https://github.com/creativecommons/ccsearch-browser-extension.git
- Install project dependencies
npm install
- 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
- 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 do not solve the issue then run thefollowing 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
ccsearch-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
ccsearch-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
ccsearch-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
ccsearch-browser-extension/dist/edge
.
Contribution
Checkout CONTRIBUTING.md for general guidelines for contributing code to CC Open Source.
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
ccsearch-browser-extension/dist/firefox/manifest.json
. -
You will be now able to see CC search 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 DOM will be loaded with the content to debug.
-
-
Google Chrome, Opera, Microsoft Edge
After you have loaded the extension, the steps are pretty straight forward.
- Right-click in extension area and select "Inspect element".
- Developer tool will now open loaded with the content to debug.
License
See LICENSE.