fabian19941220-gmail-com / GoldenWorl

https://github.com/fabian5701/Fabian5701-ccsearch-browser-extension

CC Search Browser Extension

Firefox | Chrome | Opera

A Cross-Browser Extension which lets you search and filter content in the public domain and under Creative Commons licenses.

Install

Firefox addon store	Chrome web store	Opera addon store

Features

Feature	Firefox	Chrome	Opera
Search and filter CC Licensed content.	Yes	Yes	Yes
One click attribution.	Yes	Yes	Yes
Download images (and attribution).	Yes	Yes	Yes
Bookmark images.	Yes	Yes	Yes
Export and import bookmarks.	Yes	Yes	Yes
Sync your custom setting and bookmarks across devices.	Yes	Yes	No
Options-UI for custom settings.	Yes	Yes	Yes
Dark Mode.	Yes	Yes	Yes

Installation from source

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

1. Clone the repo: git clone https://github.com/creativecommons/ccsearch-browser-extension.git.

2. Run: npm install.

3. Run: npm run dev. This would compile SASS to CSS and bundle JS. The compiled version will be in dist folder.

4. Load the extension to 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.

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
  • Navigate to chrome://extensions.
  • Make sure that Developer mode is toggled on.
  • Click on "Load Unpacked" button.

    

  • From the file explorer, choose ccsearch-browser-extension/dist/chrome.
  • Now the extension will be loaded. Click on the extension from the top right corner.
  • Right click in extension area and select "Inspect element".

    

  • Developer tool will now open loaded with the content to debug.

    

• Opera
  • Navigate to about://extensions.
  • Make sure that Developer mode is toggled on.
  • Click on "Load Unpacked" button.

    

  • From the file explorer, choose ccsearch-browser-extension/dist/opera.
  • Now the extension will be loaded. Click on the extension from the top right corner.
  • Right click in extension area and select "Inspect element".

    

  • Dev tool will now open loaded with the content to debug.

    

Troubleshooting build failures

1. If you get 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 following to install webpack-cli globally.

npm install -g webpack-cli

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.

License

See LICENSE.